Reactjs Can'；t使用GatsbyJS从Contentful加载图像

第一次在这里发帖，但我已经为此挣扎了几天了

基本上，我有一个graphQL查询，它从contentful中提取产品数据，然后将其显示在GatsbyJS页面上。查询会正确显示产品的标题、价格和说明，但不会加载到图像中。不幸的是，我不断收到错误，例如：

“TypeError:无法读取未定义的属性“0”

或

无法读取未定义的属性“src”。（更改查询以查看图像的src时。执行此方法时，url确实具有符合GraphiQL的值）

以下是我当前正在处理的页面的代码：

import React from 'react'
import { graphql } from 'gatsby'
import Img from 'gatsby-image'

import Layout from '../components/Layout'
import './shop.scss'

const Shop = ({ data }) => {

    return (
        <Layout>
            <section>
              {data.allContentfulProducts.edges.map( ({ node }) => (
                <article key={node.id}>
                  <Img
                    fluid={node.images.fluid}
                  />
                  <p>{node.productName}</p>
                </article>
              ))}
            </section>
        </Layout>
    )
}

export const productQuery = graphql`
  query {
    allContentfulProducts {
      edges {
        node {
          id
          productName
          images {
            fluid {
              ...GatsbyContentfulFluid
            }
          }
        }
      }
    }
  }
`

export default Shop

从“React”导入React
从“盖茨比”导入{graphql}
从“盖茨比图像”导入Img
从“../components/Layout”导入布局
导入“/shop.scss”
const Shop=（{data}）=>{
返回(
{data.allContentfulProducts.edges.map（{node}）=>(
{node.productName}

))}
)
}
export const productQuery=graphql`
质疑{
所有内容丰富的产品{
边缘{
节点{
身份证件
产品名称
图像{
流质{
…盖茨比浓缩液
}
}
}
}
}
}
`
导出默认商店

我认为您的graphQL查询有问题。试试这个：

export const productQuery = graphql`
  query {
    allContentfulProducts {
      edges {
        node {
          id
          productName
          image {
            fluid {
              src
              ...GatsbyContentfulFluid
            }
          }
        }
      }
    }
  }
`

---

如果此查询没有帮助，请向我们显示您的contentful资产的结构。

您是在contentful中向产品添加单个图像，还是添加多个图像？如果是多个，则表明图像是一个数组，您需要映射到

节点。图像

在访问其

流体

属性之前。提供示例数据-

图像

零件-为所有产品定义的图像？非常感谢。哦，我觉得自己很笨。出于某种原因，我没有想到内容模型中的图像字段是一个数组。我通过添加node.images[0].fluid修复了它。