如何在GatsbyJS项目中展示图片？图片无法正常显示问题排查

嘿，我来帮你搞定Gatsby里图片不显示的问题！你直接用相对路径<img src="../images/logo.png" />肯定行不通——因为Gatsby在构建时会把静态资源打包到特定的输出目录，手动写的相对路径没法正确映射到最终的文件位置。下面给你几种靠谱的解决办法，按需选择：

方法1：用Gatsby官方推荐的gatsby-plugin-image（最推荐） #

这个方案不仅能解决图片显示问题，还自带懒加载、响应式适配、自动压缩等优化特性，对网站性能友好。步骤如下：

1. 先安装所需的依赖包：

npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-source-filesystem gatsby-transformer-sharp

2. 在项目根目录的gatsby-config.js里配置这些插件：

module.exports = {
  plugins: [
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images/`, // 指向你存放图片的src/images目录
      },
    },
  ],
}

3. 修改src/components/Header.js里的代码，用StaticImage组件替代原生img标签：

import { StaticImage } from "gatsby-plugin-image"

function Header() {
  return (
    <StaticImage
      src="../images/logo.png"
      alt="网站Logo" // 别忘了加alt属性，提升可访问性
      style={{ width: 112, height: 28 }}
    />
  )
}

export default Header

这里的src路径和你原来的相对路径一致就行，Gatsby会自动处理打包和路径映射。

方法2：把图片放到static文件夹（简单快捷） #

如果只是临时需要快速展示图片，不想折腾插件，可以用这个方法：

1. 在项目根目录创建static文件夹（如果没有的话），然后在里面建images子文件夹，把logo.png放进去。
2. 修改Header.js里的img标签，用绝对路径引用：

<img src="/images/logo.png" style={{ width: 112, height: 28 }} alt="网站Logo" />

⚠️ 注意：这种方式不支持Gatsby的图片优化特性，适合简单场景使用。

方法3：通过import或require导入图片 #

还有一种轻量的方式，直接通过模块导入图片，Gatsby会自动解析正确的路径：

用ES模块导入： #

import logo from "../images/logo.png"

function Header() {
  return (
    <img src={logo} style={{ width: 112, height: 28 }} alt="网站Logo" />
  )
}

export default Header

用CommonJS的require导入： #

function Header() {
  const logo = require("../images/logo.png")
  return (
    <img src={logo.default} style={{ width: 112, height: 28 }} alt="网站Logo" />
  )
}

export default Header

这种方式也能解决路径问题，但同样没有gatsby-plugin-image的优化能力。

内容的提问来源于stack exchange，提问作者zwl1619