笔记：webpack项目优化图片体积大小时遇到图片无法正常显示

最新推荐文章于 2025-08-04 19:52:09 发布

原创最新推荐文章于 2025-08-04 19:52:09 发布 · 94 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#笔记 #webpack #前端

问题：我是用 url-loader 和 file-loader压缩图片但是有一些图片无法显示在src中是[object Module] 所以导致无法加载(有的图片可以有的不行主要针对小的图片base64的图片)

原因：👇

在使用url-loader和file-loader处理图片时，图片无法显示，src属性变成了[object Module]。这通常是因为ES模块语法的问题。在较新版本的file-loader（v5.0.0以上）中，默认使用ES模块导出，而旧版本使用CommonJS导出。因此，在引入图片时，如果使用CommonJS的方式（require）去引入一个ES模块导出的图片，就会得到[object Module]。

解决：👇

1. 降级file-loader到v4.x版本，该版本默认使用CommonJS导出。

# 安装指定版本
npm install --save-dev file-loader@4.2.0 url-loader@2.3.0

2. 在引入图片时，使用ES模块的导入方式，或者通过.default来获取图片路径。

demo1

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module.rule('images')
      .set('type', 'javascript/auto') // 禁用 Webpack 5 内置处理
      .use('url-loader')
        .loader('url-loader')
        .options({
          esModule: false, // 明确禁用 ES 模块
          limit: 1000,
          name: 'img/[name].[hash:8].[ext]'
        })
  }
}

demo2

chainWebpack: (config) => {
    // ie兼容
    config.entry("main").add("babel-polyfill");

    // 压缩图片
    const imagesRule = config.module.rule("images");
    imagesRule.uses.clear();
    imagesRule
      .use("file-loader")
      .loader("url-loader")
      .options({
        limit: 1000,
        esModule: false,
        fallback: {
          loader: "file-loader",
          options: {
            esModule: false,
            outputPath: "img",
          },
        },
      });

    // 压缩响应的app.json返回的代码压缩
    // config.optimization.minimize(true)
  },