第一次在这里发帖,但我已经为此苦苦挣扎了几天。
基本上,我有一个 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