Блог

Я пытаюсь отобразить небольшое изображение в приложении 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
        }
      }
    }
  }
`
  

Ошибка

Вы определили точку входа в свое file поле, поэтому используйте эту точку входа в качестве прямого пути следующим образом <Img fluid={data.footerHeart.childImageSharp.fluid} alt="footer" />