如何调整Gatsby Image占位符背景颜色？设置prop无效问题排查

动态加载图片时，加载前出现与白色背景不协调的颜色闪烁，尝试给GatsbyImage组件添加backgroundColor="#ffffff"属性无效——这是因为查询返回的gatsbyImageData中自带了"backgroundColor": "#5e1112"，该值会覆盖组件传入的属性。

以下是两种解决方法：

方法一：在查询中指定backgroundColor参数 #

修改GraphQL查询，给gatsbyImageData传入backgroundColor参数，直接生成带目标背景色的图片数据：

query HomePage {
  sanityHomePage {
    title
    image {
      asset {
        gatsbyImageData(backgroundColor: "#ffffff")
      }
    }
  }
}

修改后，组件无需再单独传递backgroundColor prop，加载时会直接使用白色背景，避免闪烁。

方法二：手动覆盖gatsbyImageData中的背景色 #

如果不想修改查询语句，可以在组件中解构并替换gatsbyImageData里的backgroundColor值：

const imageData = {
  ...sanityHomePage.image.asset.gatsbyImageData,
  backgroundColor: "#ffffff"
}

<GatsbyImage image={imageData} />

内容的提问来源于stack exchange，提问作者Edward