如何解决盖茨比图片类型错误:无法读取未定义的属性“ footerHeart”
我正在尝试在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" />
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。