webpack:url-loader打包img后src为[object Module]

简介: webpack:url-loader打包img后src为[object Module]

引入图片的方式

<!-- 相对路径引入 -->
<img src="./logo.jpg" alt="">
<!-- 绝对路径引入 -->
<img src="@/assets/logo.jpg" alt="">
<!-- 引入static文件, 不会处理 -->
<img src="/static/logo.jpg" alt="">

webapck 配置文件


{
  test: /\.(jpg|png|gif|jpeg|woff|ttf)$/,
   use: [
     {
       loader: 'url-loader',
       options: {
         esModule: false, // 这里设置为false
         // 如果图片大小小于这个值,就会被打包为base64格式
         limit: 10 * 1000, // 10 kb
         name: 'img/[name].[hash].[ext]',
       },
     },
   ],
 },

遇到的问题

打包产物中出现了[object Module]


<img src="[object Module]" alt="">

原因是新版本的file-loader选项esModule默认为true ,需要将其设置为false

相关文章
webpack:url-loader打包img后src为[object Module]
webpack:url-loader打包img后src为[object Module]
202 0
|
JavaScript 前端开发
webpack5不要再用url-loader了
webpack5 新增 Asset Modules 资源模块
308 0
|
JSON 前端开发 JavaScript
webpack 中 url-loader 的使用| 学习笔记
快速学习 webpack 中 url-loader 的使用
webpack 中 url-loader 的使用| 学习笔记
|
JSON 开发框架 前端开发
webpack 中使用 url-loader 处理字体文件| 学习笔记
快速学习 webpack 中使用 url-loader 处理字体文件
|
JavaScript
webpack基础篇(九):资源解析--使用url-loader
webpack基础篇(九):资源解析--使用url-loader
134 0
webpack基础篇(九):资源解析--使用url-loader
node编译TS时,tsconfig.json中的基础配置 与 webpack编译TS时webpack.config.js中的基础配置
node编译TS时,tsconfig.json中的基础配置 与 webpack编译TS时webpack.config.js中的基础配置
|
JavaScript 前端开发
Webpack 中的 module、chunk、bundle 究竟是什么?
Webpack 中的 module、chunk、bundle 究竟是什么?
392 0
webpack中module package bundle chunk详细讲解
webpack中module package bundle chunk详细讲解
142 0
|
前端开发
前端学习案例5-webpack中使用url-loader打包图片
前端学习案例5-webpack中使用url-loader打包图片
114 0
前端学习案例5-webpack中使用url-loader打包图片
|
6月前
|
JavaScript
webpack打包TS
webpack打包TS
154 60