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

相关文章
|
1月前
|
JavaScript 前端开发
webpack成长指北第9章---webpack如何对icon字体进行打包
webpack成长指北第9章---webpack如何对icon字体进行打包
31 1
|
1月前
|
前端开发 JavaScript
webpack成长指北第7章---webpack的css\less\scss样式打包
webpack成长指北第7章---webpack的css\less\scss样式打包
42 0
|
1月前
|
前端开发 JavaScript
webpack成长指北第8章---webpack的CSS Modules打包
webpack成长指北第8章---webpack的CSS Modules打包
21 0
|
4月前
webpack 使用打包报错 ERROR in node_modules\@types\node\ts4.8\assert.d.ts
webpack 使用打包报错 ERROR in node_modules\@types\node\ts4.8\assert.d.ts
116 0
|
2天前
|
前端开发 JavaScript 开发者
深入了解Webpack:前端模块打包工具
深入了解Webpack:前端模块打包工具
8 1
|
4天前
|
JavaScript 前端开发
构建工具:配置Webpack打包Vue项目
【4月更文挑战第24天】本文介绍了如何配置Webpack来打包Vue项目。首先,Webpack作为模块打包器处理依赖并打包成可执行文件。接着,通过安装Node.js和npm,创建Vue项目,进入项目目录并配置Webpack的入口、输出、加载器和插件。最后,运行构建命令完成打包。理解Webpack基础并按需配置,能优化前端项目构建和开发体验。
|
4月前
|
JavaScript 数据库
使用 Webpack 打包 node 程序,node_modules 真的被干掉啦
使用 Webpack 打包 node 程序,node_modules 真的被干掉啦
72 0
|
7月前
|
JavaScript
Webpack4 创建项目以及打包一个JS文件
Webpack4 创建项目以及打包一个JS文件
70 0
|
3月前
|
前端开发 JavaScript 开发者
webpack打包机制,构建过程和配置
webpack打包机制,构建过程和配置
19 0
|
3月前
|
JavaScript 前端开发
在项目中引入webpack打包工具
在项目中引入webpack打包工具

热门文章

最新文章