笔记：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)},