Question

第一次在这里发布，但是我已经为此苦了几天。

基本上，我有一个graphQL查询，该查询从内容中提取产品数据，然后将其显示在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

Answer 1

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

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

如果此查询无济于事，请向我们显示您有争议的资产的结构。

无法使用GatsbyJS从Contentful中加载图像

1 个答案: