Gatsby，“gatsby--image”在项目“构建”时不显示图像，但在开发过程中正确显示

Question

我用 gatsby 构建了我的第一个静态网站。但在使用“gatsby-image”时遇到困难。我正在使用“gatsby-image”中的“Img”组件，它在开发中正确显示图像，但在构建网站时什么也不显示。

我使用图像的标题：

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

const Header = () => {
    const data = useStaticQuery(graphql`
        query {
            placeholderImage: file(relativePath: { eq: "logo.png" }) {
                childImageSharp {
                    fluid (maxWidth: 225) {
                        ...GatsbyImageSharpFluid_noBase64
                    }
                }
            }
        }
    `);

    return (
        <header>
            <nav>
                <div className="nav-brand">
                    <Img 
                        imgStyle={{ objectFit: 'contain' }}
                        fluid={data.placeholderImage.childImageSharp.fluid}
                        alt="Just Do It" 
                    />
                </div>
        </header>
    );
}

export default Header;

• gatsby-config 中的插件设置：

plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`
  ],

• 我的图像是 225 * 33 PNG 图像。

Answer 1

我想我以前遇到过这个。您应该将图像存储在 static 文件夹中，而不是 src 文件夹中。静态文件夹的内容被复制到公共文件夹以进行生产构建。src 文件夹不会发生这种情况。因此，将该图像文件夹放入静态文件夹中并更新路径gatsby-config.js，看看是否可以解决问题。