Gatsby Image TypeError：无法读取未定义的属性“footerHeart”答案

【问题标题】：Gatsby Image TypeError: Cannot read property 'footerHeart' of undefinedGatsby Image TypeError：无法读取未定义的属性“footerHeart”
【发布时间】：2021-02-07 10:17:09
【问题描述】：

我试图在 gatsby 应用程序中显示一个小图像，但是，我无法在此处找出错误。

代码

import React from "react"
import Img from "gatsby-image"
import { graphql } from "gatsby"

const Footer = ({ data }) => (
  <div>
    <h1>Hello gatsby-image</h1>
    <Img fluid={data.footerHeart.file.childImageSharp.fluid} alt="footer" />
  </div>
)

export default Footer

export const query = graphql`
  query {
    footerHeart: file(relativePath: { eq: "love.png" }) {
      childImageSharp {
        fluid(maxWidth: 40) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`

错误

【问题讨论】：

您的查询是否正确检索图像（又名，有data您的数据）？

标签： graphql gatsby gatsby-image

【解决方案1】：

您已经为file 字段定义了一个入口点，所以使用该入口点作为直接路径，如下所示 <Img fluid={data.footerHeart.childImageSharp.fluid} alt="footer" />

【讨论】：