webpack打包html里面img后src为“[object Module]”问题


Posted in Javascript onDecember 22, 2019

在html中引入img图片

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document1</title>
</head>
<body>
 <div id="root" >
  <img src="./logo.jpg" alt="">
 </div>
</html>

使用url-loader/file-loader结合html-loader打包

{
  test: /\.(png|jpg|gif|jpeg)$/,
  use: [{
    loader: 'url-loader',
    loader: 'file-loader',
    options: {
      name: '[name].[ext]',
      limit: 10240
    }
  }]
},
{
  test: /\.(htm|html)$/,
  loader: 'html-loader'
}

发现打包后html里面,img的src为[object Module]

webpack打包html里面img后src为“[object Module]”问题

但是如果使用"file-loader": "^4.2.0"或者"file-loader": "^2.0.0"却可以正常打包

后来发现file-loader在新版本中esModule默认为true,因此手动设置为false

{
  test: /\.(png|jpg|gif|jpeg)$/,
  use: [{
    loader: 'url-loader',
    // loader: 'file-loader',
    options: {
      esModule: false, // 这里设置为false
      name: '[name].[ext]',
      limit: 10240
    }
  }]
}

webpack打包html里面img后src为“[object Module]”问题

这样就可以正常打包了

webpack打包html里面img后src为“[object Module]”问题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript中判断变量是数组还是对象(array还是object)
Aug 14 Javascript
jquery.idTabs 选项卡使用示例代码
Sep 03 Javascript
jQuery中html()方法用法实例
Dec 25 Javascript
Jquery注册事件实现方法
May 18 Javascript
jquery实现select下拉框美化特效代码分享
Aug 18 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
Jun 28 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
Jul 07 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
Sep 06 Javascript
Vue动态创建注册component的实例代码
Jun 14 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
Sep 20 Javascript
javascript实现拼图游戏
Jan 29 Javascript
node.js事件轮询机制原理知识点
Dec 22 #Javascript
javascript实现fetch请求返回的统一拦截
Dec 22 #Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
Dec 22 #Javascript
判断JavaScript中的两个变量是否相等的操作符
Dec 21 #Javascript
javascript中的相等操作符(==与===区别)
Dec 21 #Javascript
JavaScript中的相等操作符使用详解
Dec 21 #Javascript
高性能js数组去重(12种方法,史上最全)
Dec 21 #Javascript
You might like
239军机修复记
2021/03/02 无线电
PHP 模拟$_PUT实现代码
2010/03/15 PHP
浅谈PHP强制类型转换,慎用!
2013/06/06 PHP
laravel 5 实现模板主题功能
2015/03/02 PHP
PHP上传图片时判断上传文件是否为可用图片的方法
2016/10/20 PHP
PHP加MySQL消息队列深入理解
2021/02/27 PHP
用JavaScript脚本实现Web页面信息交互
2006/10/11 Javascript
javascript innerText和innerHtml应用
2010/01/28 Javascript
JavaScript字符串常用类使用方法汇总
2015/04/14 Javascript
Jquery解析json字符串及json数组的方法
2015/05/29 Javascript
Underscore.js 1.3.3 中文注释翻译说明
2015/06/25 Javascript
javascript中checkbox使用方法实例演示
2015/11/19 Javascript
js 自带的sort() 方法全面了解
2016/08/16 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
2016/09/02 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
2017/09/16 Javascript
vue.js中created方法作用
2018/03/30 Javascript
webpack的pitching loader详解
2019/09/23 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
小程序实现密码输入框
2020/11/16 Javascript
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
[03:26]《DAC最前线》之EG经理自述DOTA2经历
2015/02/02 DOTA
python清理子进程机制剖析
2017/11/23 Python
django js实现部分页面刷新的示例代码
2018/05/28 Python
详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击
2018/10/09 Python
python 多个参数不为空校验方法
2019/02/14 Python
Python中文编码知识点
2019/02/18 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
解决django后台管理界面添加中文内容乱码问题
2019/11/15 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
Tirendo比利时:在线购买轮胎
2018/10/22 全球购物
Jacadi Paris英国官网:法国童装品牌
2019/08/09 全球购物
国际贸易毕业生求职信范文
2014/02/21 职场文书
社区党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
在教室放鞭炮的检讨书
2014/09/28 职场文书
小学大队长竞选稿
2015/11/20 职场文书
剖析后OpLog订阅MongoDB的数据变更就没那么难了
2022/02/24 MongoDB