gatsby - 无法显示来自 gatsby-image 的 Img

Question

我正在尝试使用Img from 'gatsby-image'. 我正在使用 graphql 从src/images目录中提取图像数据。

查询返回数据，这是控制台输出：

file:
id: "f5c79f46-ac62-5305-9093-3087798d574f"
childImageSharp:
id: "60159a12-0e63-532a-b95a-9f2714358d00"
fluid:
base64: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAACXBIWXMAAAsSAAALEgHS3X78AAAEX0lEQVQ4y32Ue0zbVRTH2/76freUR/srtLRllI1Hy1gZbUFYgQnZ0pUOxkbBdqU8xpopyGPA5mvq1skyfGCYkb0CA8N0A0OCOphZND3C0f6HyRCzWNs/CSeDYTmYZzs0fdkXai/N8BXzpLioH3IY/9P+BlacvQ3uuAHuAAAAAElFTkSuQmCC"
aspectRatio: 1.187279151943463
src: "/static/59ab759908e0dac65e98b73407125e75/7b9fb/bitmoji.png"
srcSet: "/static/59ab759908e0dac65e98b73407125e75/e1953/bitmoji.png 250w,↵/static/59ab759908e0dac65e98b73407125e75/7b9fb/bitmoji.png 336w"
sizes: "(max-width: 336px) 100vw, 336px"

但是图像未呈现到页面。这是组件的代码：

import { Link, graphql,useStaticQuery } from "gatsby";
import React, {useState,useEffect} from "react";
import './style.scss';
import bitmoji from '../images/bitmoji.png';
import Img from 'gatsby-image';

const Header = (props) => {
  const {siteTitle} = props;
  const imgQuery = useStaticQuery(graphql`
  query {
    file(relativePath: {eq : "bitmoji.png"}){
    childImageSharp {
      fluid(maxWidth : 1000) {
        ...GatsbyImageSharpFluid
      }
    }
  }
}`);

  return (
    <header className={scroll ? "nav scroll" : "nav"}>
        <div className="title">
          <Img fluid={imgQuery.file.childImageSharp.fluid}/>
          <Link to="/">{siteTitle}</Link> 
        </div>
    </header>
  )
}

Answer 1

如果我复制您的组件，用它替换bitmoji.png它gatsby-astronaut.png似乎可以按预期工作。

import { graphql, useStaticQuery } from "gatsby"
import React from "react"
import Img from "gatsby-image"

const Header = props => {
  const imgQuery = useStaticQuery(graphql`
    query {
      file(relativePath: { eq: "gatsby-astronaut.png" }) {
        childImageSharp {
          fluid(maxWidth: 1000) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  `)

  return (
    <header>
      <div className="title">
        <Img fluid={imgQuery.file.childImageSharp.fluid} />
      </div>
    </header>
  )
}

export default Header