reactjs - 无法使用 GatsbyJS 从 Contentful 加载图像

Question

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

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

“TypeError：无法读取未定义的属性‘0’”

或者

无法读取未定义的属性“src”。（将查询更改为查看图像的 src 时。当我执行此方法时，根据 GraphiQL，url 确实有一个值）

这是我目前正在处理的页面的代码：

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

标签： reactjsgraphqlgatsbycontentfulgatsby-image

Answer 1

我认为你的graphQL Query有问题。试试这个：

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

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