graphql - Gatsby Image TypeError:无法读取未定义的属性“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" />
推荐阅读
- r - R 中 louvain() 返回的社区对象的解释
- java - 为什么 ConcurrentSkipListSet 升序迭代器比降序迭代器“更快”?
- angular - 在Angular中重复自动单击按钮的脚本
- php - 从mysql中的不同表中提取两列
- reactjs - 我们可以通过在组件中使用 componentDidCatch 来捕获操作引发的异常吗?
- google-maps - 如何在 iOS 和 android 上以 react native 实现谷歌地图?
- jquery - 重新连接到 Nodejs socket.io 服务器
- linux-kernel - 在 Linux 内核中向用户空间公开一个额外的标头
- java - 如何使用 O(n) 时间复杂度算法查找有效子字符串的数量
- binary - 将二进制文件从特定地址点填充到地址中的另一个特定地址点