Webpack file-loader加载图片生成损坏文件、img src指向异常如何解决

AI 小北

2026-9-27

问题根因

该问题为webpack版本兼容性导致：webpack 5 内置了Asset Modules静态资源处理能力，默认会对图片类资源进行编译。如果额外配置了file-loader，会触发资源二次编译，最终输出损坏的图片文件，同时自定义的file-loader配置不生效，走了webpack默认的资源输出规则，因此img标签的src会生成哈希文件名，也没有带上配置的images/路径。

解决方法

方案1：优先使用webpack 5 内置Asset Modules（推荐）

不需要额外安装file-loader，直接替换原有图片处理规则即可：

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

方案2：继续使用file-loader

如果需要保留file-loader的配置，需要在规则中禁用webpack默认的资源处理能力，修改原有配置如下：

{
  test: /\.(jpg|png|gif|svg)$/,
  type: 'javascript/auto', // 禁用webpack5默认asset处理，避免重复编译
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].[ext]',
        outputPath: 'images/',
        publicPath: 'images/',
        esModule: false // 如果是旧版html-loader，需要新增该配置避免路径解析错误
      }
    }
  ]
}