编程 Javascript

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]”问题

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

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

- Author -

LDP_Rou

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

利用JS自动打开页面上链接的实现代码

Sep 25 Javascript

Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)

Jun 17 Javascript

深入解析JavaScript中的变量作用域

Dec 06 Javascript

javascript实现存储hmtl字符串示例

Apr 25 Javascript

js实现div闪烁原理及实现代码

Jun 24 Javascript

javascript与css3动画结合使用小结

Mar 11 Javascript

jQuery ajax应用总结

Jun 02 Javascript

javascript实现随机生成DIV背景色

Jun 20 Javascript

详谈js遍历集合(Array,Map,Set)

Apr 06 Javascript

js中less常用的方法小结

Aug 09 Javascript

javascript设计模式 ? 模板方法模式原理与用法实例分析

Apr 23 Javascript

webpack+express实现文件精确缓存的示例代码

Jun 11 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自动加载的两种实现方法

2010/06/21 PHP

利用PHP扩展vld查看PHP opcode操作步骤

2013/03/04 PHP

PHP中使用php://input处理相同name值的表单数据

2015/02/03 PHP

PHPUnit测试私有属性和方法功能示例

2018/06/12 PHP

php传值和传引用的区别点总结

2019/11/19 PHP

php实现微信和支付宝支付的示例代码

2020/08/11 PHP

javascript jQuery插件练习

2008/12/24 Javascript

javascript简单实现表格行间隔显示颜色并高亮显示

2013/11/29 Javascript

按钮接受回车事件的三种实现方法

2014/06/06 Javascript

JavaScript包装对象使用详解

2015/07/09 Javascript

可以浮动某个物体的jquery控件用法实例

2015/07/24 Javascript

js实现的tab标签切换效果代码分享

2015/08/25 Javascript

JavaScript File分段上传

2016/03/10 Javascript

详解VUE 定义全局变量的几种实现方式

2017/06/01 Javascript

vue+element获取el-table某行的下标,根据下标操作数组对象方式

2020/08/07 Javascript

[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像

2013/07/28 DOTA

Python中的高级数据结构详解

2015/03/27 Python

Python协程的用法和例子详解

2017/09/09 Python

Python3 replace()函数使用方法

2018/03/19 Python

python实现对服务器脚本敏感信息的加密解密功能

2019/08/13 Python

在Python中使用MongoEngine操作数据库教程实例

2019/12/03 Python

如何配置关联Python 解释器 Anaconda的教程(图解)

2020/04/30 Python

python中前缀运算符 *和 **的用法示例详解

2020/05/28 Python

用python发送微信消息

2020/12/21 Python

HTML5 canvas基本绘图之绘制线段

2016/06/27 HTML / CSS

英国屋顶用品和材料超市：Roofing Supplies UK

2019/08/24 全球购物

Tenstickers法国：墙贴和装饰贴纸

2019/08/26 全球购物

大学生四年生活自我鉴定

2013/11/21 职场文书

2014三八妇女节活动总结范文四篇

2014/03/09 职场文书

党务公开方案

2014/05/06 职场文书

党员民主生活会整改措施

2014/09/26 职场文书

2014年销售人员工作总结

2014/11/27 职场文书

计划生育工作总结2015

2015/04/03 职场文书

2016年大学生暑期社会实践活动总结

2016/04/06 职场文书

MySQL数据库中varchar类型的数字比较大小的方法

2021/11/17 MySQL

Win10 Anaconda安装python-pcl

2022/04/29 Servers