[英]Gatsby - GraphQL image undefined
I'm trying to use Gatsby Image to lazy load images into CSS grid.我正在尝试使用 Gatsby Image 将图像延迟加载到 CSS 网格中。 I keep getting the error - "Cannot read property 'person' of undefined".我不断收到错误消息-“无法读取未定义的属性'person'”。
I'm not sure why/what I'm doing wrong as it should all work/the queries work in graphiql.我不确定为什么/我做错了什么,因为它应该所有工作/查询在 graphiql 中工作。
import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"
const Portfolio = ( {data} ) => {
return(
<div>
<Img fluid={data.person.childImageSharp.fluid} />
</div>
)
}
export const query = graphql`
query{
person: file(relativePath: { eq: "people-five.png" }){
childImageSharp {
fluid(maxWidth: 1000){
...GatsbyImageSharpFluid
}
}
}
}
export default Portfolio
You're missing the closing backtick in your graphql query您在 graphql 查询中缺少结束反引号
import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"
const Portfolio = ({ data }) => {
return (
<div>
<Img fluid={data.person.childImageSharp.fluid} />
</div>
)
}
export const query = graphql`
query {
person: file(relativePath: { eq: "people-five.png" }) {
childImageSharp {
fluid(maxWidth: 1000) {
...GatsbyImageSharpFluid
}
}
}
}
`
export default Portfolio
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.