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

Question

我一直在尝试通过 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 构建时，我的网站编译正常，甚至显示网页，但似乎没有显示图像，而是 space 留空。

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

**

Warning: Failed prop type: Invalid prop image of type number supplied to GatsbyImage, expected object.

**

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

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

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

内

有其他人运行遇到这个问题并知道解决方案吗？

Answer 1

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

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

您在这里将 image 定义为 index。我想在正常情况下，image 通常需要对象的 uri。它可以随 GatsbyImage 而变化，但至少不会是 index.

Answer 2

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

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

• 您的组件需要 v3 数据

为什么？因为您使用的片段是从 version 2 of Gatsby Image while the new version (version 3) is 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 playground (localhost:8000/___graphql) 中检查两个查询。

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