图像（PNG 或 WebP）突然变成黑色背景而不是透明的答案

【问题标题】：Images (either PNGs or WebPs) suddenly have black backgrounds instead of transparent图像（PNG 或 WebP）突然变成黑色背景而不是透明的
【发布时间】：2019-12-09 11:36:34
【问题描述】：

我刚在工作时更换了我的电脑。直到今天，在我运行 Windows 8 的旧 PC 上，以及在本地开发我的 Gatsby 网站时，一切都很好。自从开关（我现在在 W10 上）以来，我的透明图像现在已经失去了透明层，而是黑色。 Before-after Example

这只发生在本地；该站点有两个托管实例，在 AWS 上登台，在 Netlify 上进行生产，它们都很好。此外，当我在新选项卡中打开图像时，图像看起来很好；只有在完整查看网站时才会出现黑色。它发生在所有浏览器上。

我没有更改 gatsby-configs，所以我真的不知道问题是由 Windows、Gatsby 还是浏览器引起的，还是......虽然我猜是 gatsby-image 或 gatsby- transformer-remark，因为其他通过简单导入调用的 PNG 没有这个问题。

我尝试在 Windows 上更新我的 libwebp 库，但找不到高于 0.19 的版本

这是我来自 gatsby-config.js 的插件：

plugins: [{
            resolve: "gatsby-source-filesystem",
            options: {
                name: "src",
                path: `${__dirname}/src/`
            }
        }, {
            resolve: "gatsby-source-filesystem",
            options: {
                name: "dsp",
                path: `${__dirname}/src/pages/dsp/`
            }
        },
        {
            resolve: "gatsby-transformer-remark",
            options: {
                plugins: [{
                    resolve: "gatsby-remark-images",
                    options: {
                        maxWidth: 1200,
                        withWebp: true
                    },
                }, ],
            },
        },
        {
            resolve: "gatsby-plugin-catch-links"
        },
        {
            resolve: "gatsby-transformer-sharp"
        },
        {
            resolve: "gatsby-plugin-sharp"
        },
        {
            resolve: "gatsby-plugin-react-helmet"
        },
        {
            resolve: "gatsby-plugin-manifest",
            options: {
                name: "Mysite",
                short_name: "Mysite",
                start_url: "/",
                background_color: "#FFFFFF",
                theme_color: "#001464",
                display: "minimal-ui",
                icon: "static/icons/icon.png"
            }
        },
        {
            resolve: "gatsby-plugin-sitemap"
        },
        {
            resolve: "gatsby-plugin-google-tagmanager",
            options: {
                id: "GTM-MRM8KCP",

                // Include GTM in development.
                // Defaults to false meaning GTM will only be loaded in production.
                includeInDevelopment: true,

                // datalayer to be set before GTM is loaded
                // should be an object or a function that is executed in the browser
                // Defaults to null
                defaultDataLayer: {
                    platform: "gatsby"
                },

                // Specify optional GTM environment details.
                // gtmAuth: "YOUR_GOOGLE_TAGMANAGER_ENVIRONMENT_AUTH_STRING",
                gtmPreview: "Mysite React Preview",
                // dataLayerName: "YOUR_DATA_LAYER_NAME",
            },
        },
        {
            resolve: "gatsby-plugin-nprogress",
            options: {
                color: "#001464",
                showSpinner: false
            }
        },
        {
            resolve: "gatsby-source-wordpress",
            options: {
                baseUrl: "mysite.com",
                protocol: "https",
                hostingWPCOM: false,
                useACF: false,
                concurrentRequests: 10,
                verboseOutput: true,
                excludedRoutes: [
                    "/*/*/comments",
                ]
            }
        },
        {
            resolve: "gatsby-plugin-offline"
        },
        {
            resolve: "gatsby-plugin-sass"
        },
        {
            resolve: "gatsby-plugin-netlify-cms"
        },
        {
            resolve: "gatsby-plugin-svgr"
        }
    ]

这是我用于几乎所有相关图像的 graphQL 片段：

fragment basicFluid on File {
    childImageSharp {
        fluid(maxWidth: 1600) {
            ...GatsbyImageSharpFluid_withWebp
        }
    }
}

在页面上，我这样查询图像：

query IndexImages {
    TimesSquare: file(relativePath: { eq: "assets/images/bg/home_time_square_bg.png" }) {
        ...basicFluid
    }
}

最后是我的 package.json 依赖项：

"dependencies": {
    "@babel/runtime": "7.0.0-beta.55",
    "@svgr/webpack": "^4.3.0",
    "gatsby": "^2.0.48",
    "gatsby-cli": "^2.4.6",
    "gatsby-image": "^2.0.20",
    "gatsby-paginate": "^1.0.16",
    "gatsby-plugin-catch-links": "^2.0.8",
    "gatsby-plugin-google-fonts": "^0.0.4",
    "gatsby-plugin-google-tagmanager": "^2.1.2",
    "gatsby-plugin-manifest": "^2.0.9",
    "gatsby-plugin-netlify": "^2.0.4",
    "gatsby-plugin-netlify-cms": "^3.0.8",
    "gatsby-plugin-nprogress": "^2.0.6",
    "gatsby-plugin-offline": "^2.0.14",
    "gatsby-plugin-page-transitions": "^1.0.7",
    "gatsby-plugin-react-helmet": "^3.0.2",
    "gatsby-plugin-sass": "^2.0.4",
    "gatsby-plugin-sharp": "^2.0.15",
    "gatsby-plugin-sitemap": "^2.0.2",
    "gatsby-plugin-svgr": "^2.0.2",
    "gatsby-remark-autolink-headers": "^2.0.11",
    "gatsby-remark-images": "^3.0.3",
    "gatsby-source-filesystem": "^2.0.7",
    "gatsby-source-stripe": "^1.2.1",
    "gatsby-source-wordpress": "^2.0.93",
    "gatsby-transformer-remark": "^2.1.12",
    "gatsby-transformer-sharp": "^2.1.8",
    "graphql": "^0.13.2",
    "hashmap": "^2.3.0",
    "i18n-react": "^0.7.0",
    "mobx": "^5.6.0",
    "netlify-cms": "^2.8.0",
    "netlify-identity-widget": "^1.4.14",
    "node-sass": "^4.9.3",
    "opentracing": "^0.14.3",
    "react": "^16.6.3",
    "react-countup": "^4.1.3",
    "react-dom": "^16.6.3",
    "react-helmet": "^5.2.0",
    "react-hubspot-form": "^1.3.7",
    "react-lazy-load": "^3.0.13",
    "react-lazyload": "^2.3.0",
    "react-md": "^1.5.0",
    "react-modal": "^3.8.1",
    "react-responsive-carousel": "^3.1.47",
    "react-scroll": "^1.7.11",
    "react-sticky": "^6.0.3",
    "react-swipeable-views": "^0.13.0",
    "react-swipeable-views-core": "^0.13.0",
    "typeface-roboto": "^0.0.54",
    "utf8": "^3.0.0",
    "yarn": "^1.9.4"
},

感谢您的帮助！

【问题讨论】：

从 Windows Powershell 遇到同样的问题

标签： png gatsby webp

【解决方案1】：

您实际上可以将此属性添加到StaticImage 组件：placeholder= 'none'，或者转到 gatsby-config.js 文件并添加此：

{
  resolve: `gatsby-plugin-sharp`,
  options: {
    defaults: {
      formats: [`auto`, `webp`, `png`, `jpg`],
      placeholder: `none`,
      breakpoints: [750, 1080, 1366, 1920],
      backgroundColor: `white`,
      tracedSVGOptions: {},
      blurredOptions: {},
      jpgOptions: {},
      pngOptions: {},
      webpOptions: {},
      avifOptions: {},
    }
  }
}

https://www.gatsbyjs.com/plugins/gatsby-plugin-image/

【讨论】：

【解决方案2】：

我不确定，但我有类似的问题。我的解决方案是从query 中删除srcSetWebp。我不知道为什么，但它确实有效。

之前：

query {
    allImageSharp {
      edges {
        node {
          fluid(maxWidth: 110) {
            aspectRatio
            originalName
            sizes
            src
            srcSet
            srcWebp
            srcSetWebp
            tracedSVG
          }
        }
      }
    }
  }

之后：

query {
    allImageSharp {
      edges {
        node {
          fluid(maxWidth: 110) {
            aspectRatio
            originalName
            sizes
            src
            srcSet
            srcWebp
            tracedSVG
          }
        }
      }
    }
  }

希望你能找到解决办法。

【讨论】：