图像(PNG或WebP)突然变成黑色背景，而不是透明的

Question

我刚在工作时换了电脑。直到今天，在我运行Windows8的旧PC上，在本地开发我的Gatsby网站时，一切都很好。由于切换(我现在在W10上)，我的透明图像现在失去了透明层，取而代之的是黑色。Before-after Example

这只发生在本地；站点有两个托管实例，在AWS上，prod在Netlify上，它们都很好。此外，当我在新的标签页中打开它时，图像显示得很好；只有在完整查看站点时，才会出现黑色。不过，这在所有浏览器上都会发生。

我没有更改Gatsby配置，所以我真的不知道问题是由Windows、Gatsby还是浏览器引起的，或者...尽管我猜测是使用了gatsby-image或gatsby-transformer-remark，因为使用简单的import调用的其他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"
},

感谢您的帮助！

Answer 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/

Answer 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
          }
        }
      }
    }
  }

希望你能找到解决方案的方法。