[英]Cannot read property of undefined image within Gatsby, Contentful and Graphql?
I am trying to display an image stored on Contentful using Graphql within my Gatsby project.我正在尝试在我的 Gatsby 项目中使用 Graphql 显示存储在 Contentful 上的图像。
I am using gatsby-plugin-image as gatsby-image appears to be depreciated.我正在使用 gatsby-plugin-image,因为 gatsby-image 似乎已贬值。 So far I have followed documentation online that seems to render results however when I attempt it on my local machine I am thrown an error message.到目前为止,我已经按照似乎呈现结果的在线文档进行操作,但是当我在本地计算机上尝试它时,我会抛出一条错误消息。
My code is as follows:我的代码如下:
import * as React from "react"
import { Link, graphql } from "gatsby"
import { StaticImage } from "gatsby-plugin-image"
// import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import Layout from "../components/layout"
import Seo from "../components/seo"
import Navbar from "../components/Navbar"
import Img from 'gatsby-plugin-image'
function App( {data} ) {
return (
<>
<Layout>
<Img fluid={data.allContentfulHeroImage.edges.node.heroImage.fluid}></Img>
</Layout>
</>
)
}
export default App;
export const query = graphql
`query MyQuery {
allContentfulHeroImage {
edges {
node {
heroImage {
fluid (maxWidth: 2000) {
...GatsbyContentfulFluid
}
}
}
}
}
}`
The error message reads as follows:错误信息如下:
Cannot read property 'heroImage' of undefined
The code compiles file generating a server however throws a runtime error.该代码编译生成服务器的文件,但会引发运行时错误。
When investigating the Graphql query, it seems to be returning everything okay.在调查 Graphql 查询时,似乎一切正常。
{
"data": {
"allContentfulHeroImage": {
"edges": [
{
"node": {
"heroImage": {
"fluid": {
"base64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAMAAABI111xAAACKFBMVEX+/Pzu6ue4qp/Hw8HLzc6srK6SjoXAvbrTzcbNeobeMFTLuaj27+r69fHp39bi1cnv49b89/D9/f3+/P3u6ui3qp7HxMNsgY2SorCAgX2/vLrOx8DZU2X1EEGmiHv28e7269/z7Ob18e758ur78OL+/v62qJzEwcCLj5Ggq7OIjZK+u7uguclxfYuQgoN6kJ7v7On27ODz7+3l2db27+f88uT9+/qzppve2dbQy8nQzMnRzcm9xcssgLg/g61IhKc6h77h5ej16+Dw7OjPwb7m3tT78uWwo5jz7eny7Ofy7Oi2y9kserEZZ5oYbadTibbR2+T16t7u5+PfysX06Nz78+ft6eeuoJa0yNZCga6IpKwwfrU2hLzZ3eD17OLp3M/s4tj16Nn89OmrnpTz7efK1Nkbbqglda1TjrhBfafy7uv8+fb69/T17+nw4tP8+fT9/PymmZHs5eDc1M/Pw8C/sa2Yr78KYZ0OZ6UTbas4d6Lz7+v8+PX7+ff7+vj8/Prm5OXt6eVhUk2tmZCwnpOgi32WgnR9gYQNX5oKXJkWb6tVfpn79/T59vP6+Pb8+/ra2Np5dnesqqyEd23j39WppJljY2R2aV1ma2wOXJUWY5sYbamAh4vx7en69vP59fH69/XLyMjAvsDb2tu9trhgXWKxsLJ/cmjV1cyEhH11bGiBcWaMkZUHUIgVYpkWaKGjm5Xm3Njw6eTg2tT49PHX0tHf3d2cmZsK8zYRAAAACXBIWXMAACToAAAk6AGCYwUcAAAAB3RJTUUH5QgXDwE4TabKlAAAAGtJREFUCB1lwcERAUEQhtH/2+qjoVdvAspFBBKQhxDkIicnInBwdOyiJDBOpmrNe4iOCDqJpjVzD9n+tmUu0q44UAealMWBj6oKTaSlFuUpFRodLbRkxc/bIX04Xcbm5ZuxupwzPZv4c9/xBY2+FUzXeF9XAAAAAElFTkSuQmCC",
"aspectRatio": 1.7702233250620347,
"src": "//images.ctfassets.net/m7ipc0qjqa17/5H1yapaRznP5PlOxymzApj/d60687e3c7acc68a866d2718a4db125c/Screenshot_2021-08-23_145047.png?w=800&q=50",
"srcSet": "//images.ctfassets.net/m7ipc0qjqa17/5H1yapaRznP5PlOxymzApj/d60687e3c7acc68a866d2718a4db125c/Screenshot_2021-08-23_145047.png?w=200&h=113&q=50 200w,\n//images.ctfassets.net/m7ipc0qjqa17/5H1yapaRznP5PlOxymzApj/d60687e3c7acc68a866d2718a4db125c/Screenshot_2021-08-23_145047.png?w=400&h=226&q=50 400w,\n//images.ctfassets.net/m7ipc0qjqa17/5H1yapaRznP5PlOxymzApj/d60687e3c7acc68a866d2718a4db125c/Screenshot_2021-08-23_145047.png?w=800&h=452&q=50 800w,\n//images.ctfassets.net/m7ipc0qjqa17/5H1yapaRznP5PlOxymzApj/d60687e3c7acc68a866d2718a4db125c/Screenshot_2021-08-23_145047.png?w=1200&h=678&q=50 1200w,\n//images.ctfassets.net/m7ipc0qjqa17/5H1yapaRznP5PlOxymzApj/d60687e3c7acc68a866d2718a4db125c/Screenshot_2021-08-23_145047.png?w=1600&h=904&q=50 1600w,\n//images.ctfassets.net/m7ipc0qjqa17/5H1yapaRznP5PlOxymzApj/d60687e3c7acc68a866d2718a4db125c/Screenshot_2021-08-23_145047.png?w=2400&h=1356&q=50 2400w,\n//images.ctfassets.net/m7ipc0qjqa17/5H1yapaRznP5PlOxymzApj/d60687e3c7acc68a866d2718a4db125c/Screenshot_2021-08-23_145047.png?w=3567&h=2015&q=50 3567w",
"sizes": "(max-width: 800px) 100vw, 800px"
}
}
}
}
]
}
},
"extensions": {}
}
I'm very much uncertain as to what the issue is here, I have looked elsewhere and other examples seem fine, is it something to do with the gatsby-plugin-image perhaps?我非常不确定这里的问题是什么,我在别处看过并且其他示例看起来不错,这可能与 gatsby-plugin-image 有关吗?
Any help would be great as this seems to be quite a niche issue.任何帮助都会很棒,因为这似乎是一个小众问题。
Thanks谢谢
edges
is an array, and arrays do not have a node
property, so edges.node
evaluates to undefined
. edges
是一个数组,而 arrays 没有node
属性,因此edges.node
计算结果为undefined
。 You then attempt to access heroImage
on undefined
, which throws the error.然后您尝试访问undefined
上的heroImage
,这会引发错误。
Instead consider using edges.map
, for example:而是考虑使用edges.map
,例如:
edges.map(({ node }, index) => <Img key={index} {...node.heroImage} />)
For what it's worth, you can change your query to simplify this song and dance a fair bit:对于它的价值,您可以更改您的查询以简化这首歌和舞蹈:
export const query = graphql`
{
heroImages: allContentfulHeroImage {
nodes {
heroImage {
fluid (maxWidth: 2000) {
...GatsbyContentfulFluid
}
}
}
}
}
`
Then you'd be able to map over data.heroImages.nodes
, and instead of destructuring node
from each item, you can use it as-is or destructure the properties you need on it.然后你就可以 map 超过data.heroImages.nodes
,而不是解构每个项目的node
,你可以按原样使用它或解构你需要的属性。 Eg:例如:
data.heroImages.nodes.map(({ heroImage }, index) =>
<Img key={index} {...heroImage} />
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.