Gatsby Img 不渲染答案

【问题标题】：Gatsby Img not renderingGatsby Img 不渲染
【发布时间】：2020-11-21 11:00:19
【问题描述】：

我正在尝试使用以下页面上的 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 在网站的其他部分工作，所以配置没有问题。

【问题讨论】：

您能否在开发检查器工具中的“元素”选项卡中显示 html 输出的图像应位于的位置？

标签： gatsby gatsby-image

【解决方案1】：

你的父组件是一个弹性盒子。可能您必须为图像组件指定高度和宽度：添加 style={{height: "100px", width: "100px"}} 到 Img 才能看到它。

解释：

具有默认增长和收缩值的 flexbox 容器扩展至最小尺寸以显示其子组件。因为 Gatsby-Image 组件的默认最小尺寸没有设置，所以它被隐式设置为 0。这就是为什么你看不到任何东西，但你的开发者工具仍然会显示 HTML 节点。

通过声明宽度和高度，您可以设置在浏览器中可以看到的最小尺寸。

【讨论】：