Gatsby - GraphQL 图像未定义

Question

我正在尝试使用 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

Answer 1

您在 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