javascript - Gatsby - GraphQL 图像未定义
问题描述
我正在尝试使用 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
解决方案
您在 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
推荐阅读
- rust - 当整数算术运算溢出时,Rust 编程语言会发生什么?
- python - 如何在破折号 dbc.Tabs 中将制表符放在新行中?
- python - Python Flask 项目 ID 无效
- javascript - 如何将项目和按钮添加为编号列表
- struct - 了解线程安全的 RwLock
> Rust 中的机制 - python - Discord 令牌加入者与 discord.py
- sql - 如果一个值是字符串,则在 SQL 中过滤掉整个 ID
- android - 我可以为具有相同 kaystore 不同包名称的多个客户端签署相同的应用程序吗?
- haskell - 分级偏序(从拓扑排序开始)
- node.js - 开发使用远程服务器 API 的 React 应用程序