React执行npm run build后图片转为Data URL而非原路径的问题

问题原因 #

React项目默认打包工具（比如Create React App内置的webpack）会对**小体积图片（通常阈值是10KB）**自动转为Data URL，以此减少HTTP请求数量；只有体积超过阈值的图片才会保留独立文件引用。你的图片被转成Data URL，大概率是因为体积低于这个默认阈值。

解决方案 #

方法1：修改webpack配置（Create React App 需先eject） #

如果使用Create React App，先执行命令暴露配置文件：

npm run eject

找到config/webpack.config.js，搜索url-loader相关配置，调整limit参数（单位为字节），设为0即可禁用所有图片的Data URL转换：

{
  test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
  loader: require.resolve('url-loader'),
  options: {
    limit: 0, // 所有图片都会生成独立文件
    name: 'images/[name].[hash:8].[ext]',
  },
}

修改后重新打包：

npm run build

方法2：不eject，用react-app-rewired覆盖配置 #

不想eject的话，用react-app-rewired修改默认配置：

1. 安装依赖：

npm install react-app-rewired customize-cra --save-dev

2. 在项目根目录创建config-overrides.js，添加以下内容：

const { override, adjustStyleLoaders } = require('customize-cra');

module.exports = override(
  adjustStyleLoaders(loaders => {
    loaders.url.options.limit = 0;
  })
);

3. 修改package.json中的脚本命令：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

4. 执行npm run build重新打包。

方法3：将图片放到public目录直接引用 #

把图片移到项目根目录的public/images文件夹下，然后用绝对路径引用：

<img src="/images/example.png" alt="Hello" />

打包后图片会被直接复制到build/images目录，src属性保持为/images/example.png，无需修改打包配置。

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