Gatsby使用Graphql调用Contentful图片不显示，报image类型错误如何解决？

问题原因 #

1. 控制台报错的直接诱因是给GatsbyImage组件的image属性传入了遍历生成的index数字值，该属性要求传入标准的图片数据对象，类型不匹配触发警告。
2. 组件与查询字段不兼容：当前使用的GatsbyImage是Gatsby 3及以上版本的官方新图片组件，配套的查询字段为gatsbyImageData，而现有代码查询的fluid是已废弃的旧版gatsby-image组件的对应字段，二者无法搭配使用。
3. 查询不到childImageSharp属于正常情况：Contentful的图片资源在云端完成裁切、格式转换等处理，gatsby-source-contentful插件会直接返回格式化好的图片数据，不需要经过本地Sharp工具处理，因此不存在该字段。

解决方案 #

按照以下步骤修改代码即可正常展示图片：

1. 替换GraphQL查询中的fluid相关字段为gatsbyImageData
2. 调整组件传参逻辑，将正确的图片数据传入image属性，补全合法的key与alt属性
3. 可使用官方提供的getImage工具函数安全获取图片数据，避免空值报错

修改后的完整代码如下：

import * as React from "react"
import { graphql } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"


function MainApp( {data} ) {
  return (
    <>
      {data.allContentfulHeroImage.edges.map(({ node }, index) => {
        const image = getImage(node.heroImage)
        return <GatsbyImage image={image} alt={`英雄展示图${index}`} key={index} />
      })}
    </>
  )
}

export default MainApp;

export const query = graphql`
query MyQuery {
  allContentfulHeroImage {
    edges {
      node {
        heroImage {
          gatsbyImageData(maxWidth: 2000, placeholder: BLURRED)
        }
      }
    }
  }
}

你可以根据需求调整gatsbyImageData的参数，placeholder支持BLURRED（模糊占位）、TRACED_SVG（轮廓占位）、NONE（无占位）三个选项。

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