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 相关文章推荐
jQuery 操作XML入门
Dec 25 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
Nov 13 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
May 05 Javascript
jquery实现文本框的禁用和启用
Dec 07 Javascript
js实现上下左右弹框划出效果
Mar 08 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
Aug 24 Javascript
解决angularjs WdatePicker ng-model的问题
Sep 13 Javascript
解决vue keep-alive 数据更新的问题
Sep 21 Javascript
浅谈Express.js解析Post数据类型的正确姿势
May 30 Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
Jul 22 Javascript
React + Threejs + Swiper 实现全景图效果的完整代码
Jun 28 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
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
解析PHP处理换行符的问题 \r\n
2013/06/13 PHP
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
php mail to 配置详解
2014/01/16 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
2013/04/12 Javascript
JS截取字符串常用方法整理及使用示例
2013/10/18 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
2014/05/29 Javascript
jquery浏览器滚动加载技术实现方案
2014/06/03 Javascript
JS和JQ的event对象区别分析
2014/11/24 Javascript
封装好的js判断操作系统与浏览器代码分享
2015/01/09 Javascript
JavaScript数据类型详解
2015/04/01 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
React Native中的RefreshContorl下拉刷新使用
2017/10/09 Javascript
vuejs实现标签选项卡动态更改css样式的方法
2018/05/31 Javascript
详解 Python 与文件对象共事的实例
2017/09/11 Python
python在每个字符后添加空格的实例
2018/05/07 Python
Python中的Numpy矩阵操作
2018/08/12 Python
python实践项目之监控当前联网状态详情
2019/05/23 Python
python数字类型math库原理解析
2020/03/02 Python
如何用python 操作zookeeper
2020/12/28 Python
python 制作本地应用搜索工具
2021/02/27 Python
Html5 页面适配iPhoneX(就是那么简单)
2019/09/05 HTML / CSS
英国知名化妆品网站:Revolution Beauty(原TAM Beauty)
2018/02/28 全球购物
ECCO俄罗斯官网:北欧丹麦鞋履及皮具品牌
2020/06/26 全球购物
早餐连锁店计划书
2014/01/08 职场文书
优秀少先队工作者事迹材料
2014/05/13 职场文书
小学教师师德承诺书
2014/05/23 职场文书
人事任命通知
2015/04/20 职场文书
创业方案:赚钱的烧烤店该怎样做?
2019/07/05 职场文书
当你焦虑迷茫时,请读读这6句话
2019/07/24 职场文书
吉利入股戴姆勒后smart“长大了”
2022/04/21 数码科技