React组件加载本地JSON中图片失败问题（Webpack4环境）

我之前在项目里也碰到过一模一样的情况——Webpack对静态资源的路径解析规则确实容易踩坑，尤其是从JSON里读取路径的时候。直接用JSON里的字符串路径Webpack是不会自动处理的，必须通过require()让Webpack识别这是需要打包的静态资源，下面给你两种可行的实现方式：

方法一：渲染时直接用require()包裹路径 #

把你原来的image={release.imageURL}改成用require()包裹路径字符串，注意要确保JSON里的路径是相对于当前组件文件的相对路径：

// 调整后的图片渲染代码
<img src={require(release.imageURL)} alt="Release cover" />

举个具体例子，如果你的JSON数据是这样的：

{
  "releases": [
    {
      "id": 1,
      "imageURL": "./images/album-cover.jpg"
    }
  ]
}

只要你的组件文件和images文件夹在同一层级，这个写法就能正常让Webpack解析图片路径，打包后正确加载。

方法二：预处理JSON数据（批量处理路径） #

如果你的数据量比较大，不想在渲染时逐个写require()，可以在导入JSON后先批量处理路径：

import releasesData from './data/releases.json';

// 预处理所有图片路径，让Webpack提前解析
const processedReleases = releasesData.map(release => ({
  ...release,
  imageURL: require(release.imageURL)
}));

// 之后渲染时直接用处理好的路径即可
{processedReleases.map(release => (
  <img key={release.id} src={release.imageURL} alt="Release cover" />
))}

关键注意事项 #

• 确保Webpack配置了file-loader或url-loader来处理图片文件（Webpack 4不会默认处理，需要在webpack.config.js里添加规则）：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'images/' // 打包后图片输出的目录
            }
          }
        ]
      }
    ]
  }
};

• JSON里的路径不能是绝对路径，必须是相对路径（相对于组件文件或者项目根目录，取决于你Webpack的配置），否则Webpack无法解析。

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