编程 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 相关文章推荐

表单提交验证类

Jul 14 Javascript

脚本吧 - 幻宇工作室用到js,超强推荐expand.js

Dec 23 Javascript

JavaScript中的style.cssText使用教程

Nov 06 Javascript

使用script的src实现跨域和类似ajax效果

Nov 10 Javascript

JavaScript入门基础

Aug 12 Javascript

JS事件添加和移出的兼容写法示例

Jun 20 Javascript

PHP实现记录代码运行时间封装类实例教程

May 08 Javascript

详解webpack 如何集成第三方js库

Jun 29 Javascript

ES6使用export和import实现模块化的方法

Sep 10 Javascript

浅谈layer弹出层按钮颜色修改方法

Sep 11 Javascript

JS实现吸顶特效

Jan 08 Javascript

electron踩坑之remote of undefined的解决

Oct 06 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

Mysql的常用命令

2006/10/09 PHP

使用NetBeans + Xdebug调试PHP程序的方法

2011/04/12 PHP

PHP冒泡排序算法代码详细解读

2011/07/17 PHP

PHP ADODB生成下拉列表框功能示例

2018/05/29 PHP

php swoole多进程/多线程用法示例【基于php7nts版】

2019/08/12 PHP

mysql输出数据赋给js变量报unterminated string literal错误原因

2010/05/22 Javascript

Jquery通过Ajax访问XML数据的小例子

2013/11/18 Javascript

jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标

2014/03/06 Javascript

extjs 如何给column 加上提示

2014/07/29 Javascript

javascript中HTMLDOM操作详解

2014/12/11 Javascript

JQuery插件Quicksand实现超炫的动画洗牌效果

2015/05/03 Javascript

常用javascript表单验证汇总

2020/07/20 Javascript

jQuery javascript获得网页的高度与宽度的实现代码

2016/04/26 Javascript

ES6概念 Symbol toString()方法

2016/12/25 Javascript

JS原型与原型链的深入理解

2017/02/15 Javascript

ES6数组的扩展详解

2017/04/25 Javascript

详解Vue组件之间的数据通信实例

2017/06/17 Javascript

angular5 子组件监听父组件传入值的变化方法

2018/09/30 Javascript

Angular事件之不同组件间传递数据的方法

2018/11/15 Javascript

简单了解前端渐进式框架VUE

2020/07/20 Javascript

[01:40]2014DOTA2国际邀请赛三冰SOLO赛后采访恶搞

2014/07/09 DOTA

Python中使用logging模块打印log日志详解

2015/04/05 Python

Python使用pymysql从MySQL数据库中读出数据的方法

2018/07/25 Python

Python 装饰器原理、定义与用法详解

2019/12/07 Python

django框架两个使用模板实例

2019/12/11 Python

Python代码一键转Jar包及Java调用Python新姿势

2020/03/10 Python

在阿联酋购买翻新手机和平板电脑：Teckzu

2021/02/12 全球购物

为什么在使用动态 SQL 语句时必须为低层数据库对象授予权限

2012/12/13 面试题

如果Session Bean得Remove方法一直都不被调用会怎么样

2012/07/14 面试题

四风自我剖析材料

2014/09/30 职场文书

新党章的学习心得体会

2014/11/07 职场文书

2014年办公室文员工作总结

2014/11/12 职场文书

2014年精神文明工作总结

2014/12/23 职场文书

自我检讨书范文

2015/01/28 职场文书

闪闪的红星观后感

2015/06/08 职场文书

Pytorch 中net.train 和 net.eval的使用说明

2021/05/22 Python