[英]Gatsby - GraphQL image undefined
我正在尝试使用 Gatsby Image 将图像延迟加载到 CSS 网格中。 我不断收到错误消息-“无法读取未定义的属性'person'”。
我不确定为什么/我做错了什么,因为它应该所有工作/查询在 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
您在 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.