我正在尝试使用下一页上的 Gatsby Img 组件加载图片:
import React from "react"
import { graphql, useStaticQuery } from "gatsby"
import Img from "gatsby-image"
import Layout from "../components/layout"
import SEO from "../components/seo"
import FeatureCard from "../components/featureCard"
import { getImage } from "../utils/getImage"
function IndexPage() {
const data = useStaticQuery(graphql`
query {
file(relativePath: { eq: "index/profile.JPG" }) {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
}
`)
console.log(data.file.childImageSharp.fluid);
const featureCardContainer =
"flex justify-center w-full my-2 md:px-2 lg:my-4 lg:px-4 lg:w-full xl:w-1/2"
return (
<Layout>
<div className="w-full h-auto flex flex-col justify-center items-center">
<h1 className="text-2xl">Testing</h1>
<Img fluid={data.file.childImageSharp.fluid} alt={'Profile Picture'} />
</div>
</Layout>
)
}
export default IndexPage
Img 组件没有呈现,我不知道为什么。我已经记录了 graphql 查询,它确实在获取正确的 GatsbyImageSharpFluid 对象。
日志
我错过了一些非常明显的东西吗?
我有 Gatsby-image 在网站的其他部分工作,所以配置没有问题。