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

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 数码科技