在 Gatsby 中使用 Graphql 和 Contentful 时图像不显示，道具类型失败：类型为“数字”的道具“图像”无效，预期为“对象”？

Posted 2023-03-08

【中文标题】在 Gatsby 中使用 Graphql 和 Contentful 时图像不显示，道具类型失败：类型为“数字”的道具“图像”无效，预期为“对象”？

【英文标题】：Image not displaying when using Graphql and Contentful in Gatsby, Failed prop type: Invalid prop `image` of type `number` expected `object`?

【发布时间】：2021-10-24 14:37:58

【问题描述】：

我一直在尝试通过 Graphql 成功查询 Contentful，以便在我的 gatsby 项目中访问和显示图像。

我的代码如下：

import * as React from "react"
import  graphql  from "gatsby"
import  GatsbyImage  from "gatsby-plugin-image"


function MainApp( data ) 

  return (
    <>  
      data.allContentfulHeroImage.edges.map(( node , index) => <GatsbyImage image=index ...node.heroImage alt=`` key=`` />)
    </>
  )


export default MainApp;

export const query = graphql 
`query MyQuery 
  allContentfulHeroImage 
    edges 
      node 
        heroImage 
          fluid (maxWidth: 2000) 
            ...GatsbyContentfulFluid
          
        
      
    
  
`

运行 gatsby build 时，我的网站编译正常，甚至显示网页，但似乎没有显示任何图像，而是空间为空。

查看控制台时会抛出错误消息：

**

警告：失败的道具类型：无效的道具image 类型为number 提供给GatsbyImage，预期object。

**

我已尝试通过搜索错误消息的其他示例以及似乎与 childImageSharp 相关的唯一解决方案来解决此问题？

我正在寻找的解决方案在这里：

Gatsby-Image failed prop type

我尝试使用此方法更改我的查询，但没有成功，我也怀疑它是否适用于我的案例，因为在浏览 http 中的资源管理器时 childImageSharp 未列为我的查询的子项://localhost:8000/___graphql.

有没有其他人遇到过这个问题并知道解决方案？

【参考方案1】：

您正在混合 Gatsby 图像版本之间的概念。

您的 GraphQL 查询正在获取 v2 图像

您的组件需要 v3 数据

为什么？因为你使用的fragment是从version 2 of Gatsby Image中提取出来的，而新版本（版本3）是GatsbyImage component只有版本3才有。

此外，您将一个数字 (index) 传递给 image 属性，这不是组件所期望的。

找出gatsby-image 和gatsby-plugin-image 之间的区别。

解决方案很明显，使用一个或另一个。

使用gatsby-image (v2)

import * as React from "react"
import  graphql  from "gatsby"
import Img from "gatsby-image"


function MainApp( data ) 

  return (
    <>  
      data.allContentfulHeroImage.edges.map(( node , index) => <Img fluid=node.heroImage.fluid alt=`` key=`` />)
    </>
  )


export default MainApp;

export const query = graphql 
`query MyQuery 
  allContentfulHeroImage 
    edges 
      node 
        heroImage 
          fluid (maxWidth: 2000) 
            ...GatsbyContentfulFluid
          
        
      
    
  
`

注意import Img from "gatsby-image"。

使用gatsby-plugin-image (v3)

import * as React from "react"
import  graphql  from "gatsby"
import  GatsbyImage  from "gatsby-plugin-image"


function MainApp( data ) 

  return (
    <>  
      data.allContentfulHeroImage.edges.map(( node , index) => <GatsbyImage image=node.heroImage.gatsbyImageData alt=`` key=`` />)
    </>
  )


export default MainApp;

export const query = graphql 
`query MyQuery 
  allContentfulHeroImage 
    edges 
      node 
        heroImage 
           gatsbyImageData(
             width: 200
             placeholder: BLURRED
             formats: [AUTO, WEBP, AVIF]
           )
          
        
      
    
  
`

像往常一样，在 GraphiQL 游乐场 (localhost:8000/___graphql) 中检查这两个查询。

这两种方法的可用性将取决于您安装的依赖项。检查两种情况下的要求（安装打包等）

【参考方案2】：

我不熟悉GatsbyImage，但我相信你的问题很清楚。

<GatsbyImage image=index ...node.heroImage alt=`` key=`` />

您在此处将image 定义为index。我猜在正常情况下，image 通常需要对象的uri。它可以与GatsbyImage 不同，但至少不会是index。