Question

我用gatsby建立了我的第一个静态网站。但是在使用“ gatsby图像”时会遇到麻烦。我正在使用“ 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

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

Answer 2

我意识到这是一篇旧帖子，但我遇到了类似的问题，困扰了我几个小时，直到我终于意识到这是因为 AWS 在 Amplify 上禁止了该文件类型。如果您的主机阻止显示它们，您可以在实例设置中启用图像类型。

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

2 个答案: