我刚在工作时更换了计算机。直到今天，在运行Windows 8的旧PC上，以及在本地开发Gatsby网站时，一切都很好。自从切换（我现在在W10上）开始，我的具有透明性的图像现在失去了透明层，而是变为黑色。 Before-after Example
仅在本地发生；该站点有两个托管实例，分别在AWS上暂存，在Netlify上暂存，都可以。另外，当我在新标签页中打开图像时，该图像看起来还不错；仅当完整查看网站时，才会出现黑色。不过，它在所有浏览器上都会发生。
我没有更改gatsby-configs，所以我真的不知道问题是由Windows，Gatsby或浏览器引起的，还是...尽管我猜是与gatsby-image或gatsby-transformer有关-备注，因为使用简单导入调用的其他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"
},
感谢您的帮助！
我不确定，但我有类似的问题。我的解决方案是从srcSetWebp中删除query。我不知道为什么，但是它可以正常工作。
之前：
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
}
}
}
}
}
希望您可以找到适合您的解决方案的方法。