React + Webpack项目本地图片加载失败报404错误如何解决？

• 图片引用方式不符合Webpack资源处理规则：直接在JSX的src属性写入静态相对路径时，Webpack不会将该路径识别为需要处理的资源，会原样保留，运行时相对路径解析错位导致404
• file-loader配置缺失必要参数：未指定图片打包后的输出路径、访问前缀，即便正确导入图片也会出现路径不匹配问题
• 静态资源路径映射错误：devServer的contentBase已指向static/frontend目录，该目录下的资源可直接通过根路径访问，原引用的相对路径层级计算错误

方案一：通过Webpack打包处理图片（推荐，支持生产环境资源哈希、压缩优化） #

1. 修改Webpack配置中的file-loader规则，添加输出路径和访问前缀配置：

{
  test: /\.(png|svg|jpg|gif)$/,
  loader: "file-loader",
  options: {
    // 图片打包后输出到static/frontend/images目录
    outputPath: 'images/',
    // 拼接公共前缀后最终访问路径为 /static/frontend/images/[文件名]
    publicPath: PUBLIC_PATH + 'images/'
  }
}

2. 修改Header.js中的图片引用方式，先导入再使用：

// 组件顶部导入图片资源
import BendingFigure from '../../static/frontend/images/BendingFigure.png'

// 组件内使用
<img src={BendingFigure} />

Webpack5 兼容说明 #

Webpack5 已内置资源模块能力，无需额外安装file-loader，可替换规则为：

{
  test: /\.(png|svg|jpg|gif)$/,
  type: 'asset/resource',
  generator: {
    filename: 'images/[contenthash][ext][query]'
  }
}

方案二：不经过Webpack打包，直接引用静态资源 #

如果不需要对图片做打包优化，可直接修改Header.js中的图片路径，利用devServer的静态资源映射规则直接访问：

<img src="/images/BendingFigure.png" />

生产部署时需保证static/frontend/images目录与打包后的main.js处于同级目录即可。

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