更新Gatsby客户端后gatsby-plugin-image报Missing image prop错误

问题原因 #

错误[gatsby-plugin-image] Missing image prop触发的核心原因是部分博客文章的featuredImage字段为空，getImage方法接收到空值后返回了undefined，GatsbyImage组件没有拿到有效的图片参数就抛出了报错。你贴出的查询结果仅包含一条有封面图的文章示例，其他未填充封面图的文章会触发这个问题。

解决步骤 #

• 首先给图片渲染逻辑加空值兼容，判断featuredImage存在时再渲染GatsbyImage，不存在时渲染占位内容：

<Col xl={6} lg={6} m={3}>
  <div className="eikona">
    {post.node.featuredImage ? (
      <GatsbyImage 
        className="featured-image" 
        image={getImage(post.node.featuredImage)} 
        alt={post.node.title}
      />
    ) : (
      // 可替换为你自己的占位图逻辑，比如静态资源或者纯色块
      <div className="placeholder-image" style={{width:230, height:347, background:'#f5f5f5'}}></div>
    )}
  </div>
</Col>

• 排查Contentful后台的内容结构，确认是不是修改结构时把featuredImage改为了非必填字段，检查所有已发布的博客文章，要么补全所有文章的封面图，要么保留该字段非必填并做好前端兼容。
• 清理本地缓存：删除项目根目录的.cache和public文件夹，再重新执行gatsby develop启动项目，避免版本更新后的缓存残留影响渲染。
• 如果确认所有文章都有封面图，可直接跳过getImage传值测试，确认是不是getImage的版本兼容问题：

<GatsbyImage 
  className="featured-image" 
  image={post.node.featuredImage?.gatsbyImageData} 
  alt={post.node.title}
/>

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