React Build打包后部分图片无法加载问题求助

1. 规范组件内图片的引入方式 #

别直接在组件里写相对路径字符串（比如src="../assets/shoe.png"），这种写法在开发环境能跑，但build后容易路径错乱。正确的做法是用import引入图片：

import shoeImg from '../assets/shoe.png';

// 组件里这么用
<img src={shoeImg} alt="鞋子" />

webpack会自动处理图片的哈希命名和路径，build后能正常加载。

2. 给package.json加homepage字段（Create React App项目） #

如果用的是官方的Create React App，直接在package.json里加一行：

"homepage": "."

这个配置会让build后的资源都用相对路径，本地打开build/index.html时就不会出现路径找不到的问题。要是以后部署到服务器子目录，就把值改成对应路径（比如"/fashion/"）。

3. public目录下的图片要正确引用 #

如果图片存在public文件夹里，别直接写src="/img/star.png"，要这么写：

• 在public/index.html里用%PUBLIC_URL%：

<img src="%PUBLIC_URL%/img/star.png" alt="星星" />

• 在组件里用process.env.PUBLIC_URL：

<img src={`${process.env.PUBLIC_URL}/img/star.png`} alt="星星" />

build时这些占位符会被替换成正确的资源路径。

4. 检查build后的实际路径 #

build完之后，打开build/index.html，右键查看无法加载的图片的src属性，看看路径是不是绝对路径（比如/static/media/xxx.png）。如果是，那就是publicPath没配对，改成相对路径就能解决。

5. 自定义webpack配置的情况 #

要是你自己改了webpack配置，确保output.publicPath设为./，同时图片加载器（file-loader/url-loader）的输出路径配置正确：

module.exports = {
  output: {
    publicPath: './',
    // 其他输出配置
  },
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[hash:8].[ext]',
              outputPath: 'assets/images',
            },
          },
        ],
      },
    ],
  },
};

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