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

JavaScript 编程引入命名空间的方法

Jun 29 Javascript

默认让页面的第一个控件选中的javascript代码

Dec 26 Javascript

怎么选择Javascript框架(Javascript Framework)

Nov 22 Javascript

jQuery对象与DOM对象转换方法详解

May 10 Javascript

JS中Json数据的处理和解析JSON数据的方法详解

Jun 29 Javascript

ionic2打包android时gradle无法下载的解决方法

Apr 05 Javascript

vue实现表格增删改查效果的实例代码

Jul 18 Javascript

vue中七牛插件使用的实例代码

Jul 28 Javascript

利用vscode调试编译后的js代码详解

May 14 Javascript

vue.js 2.0实现简单分页效果

Jul 29 Javascript

vue开发中遇到的问题总结

Apr 07 Javascript

vue实现可移动的悬浮按钮

Mar 04 Vue.js

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的图形函数中显示汉字

2006/10/09 PHP

php header示例代码(推荐)

2010/09/08 PHP

php如何执行非缓冲查询API

2016/07/22 PHP

php中请求url的五种方法总结

2017/07/13 PHP

PHP实现关键字搜索后描红功能示例

2019/07/03 PHP

javascript Array.remove() 数组删除

2009/08/06 Javascript

关于Aptana Studio生成自动备份文件的解决办法

2009/12/23 Javascript

Jquery Autocomplete 结合asp.net使用要点

2010/10/29 Javascript

javascript 图片裁剪技巧解读

2012/11/15 Javascript

让新消息在网页标题闪烁提示的jQuery代码

2013/11/04 Javascript

node.js中的events.EventEmitter.listenerCount方法使用说明

2014/12/08 Javascript

使用JavaScript开发IE浏览器本地插件实例

2015/02/18 Javascript

jQuery实现带幻灯的tab滑动切换风格菜单代码

2015/08/27 Javascript

jQuery实现的导航下拉菜单效果

2016/07/04 Javascript

JavaScript中数组的22种方法必学(推荐)

2016/07/20 Javascript

EasyUI加载完Html内容样式渲染完成后显示

2016/07/25 Javascript

DWR3 访问WEB元素的两种方法实例详解

2017/01/03 Javascript

Vue实现active点击切换方法

2018/03/16 Javascript

layui 表格的属性的显示转换方法

2018/08/14 Javascript

JS中appendChild追加子节点无效的解决方法

2018/10/14 Javascript

微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】

2019/02/20 Javascript

JS学习笔记之原型链和利用原型实现继承详解

2019/05/29 Javascript

nuxt踩坑之Vuex状态树的模块方式使用详解

2019/09/06 Javascript

nodejs各种姿势断点调试的方法

2020/06/18 NodeJs

Python中Scrapy爬虫图片处理详解

2017/11/29 Python

Flask实现图片的上传、下载及展示示例代码

2018/08/03 Python

Python 批量刷博客园访问量脚本过程解析

2019/08/30 Python

世界领先的高品质定制产品平台：Zazzle

2017/07/23 全球购物

第二层交换机和路由器的区别？第三层交换机和路由器的区别？

2013/05/23 面试题

幼师自荐信范文

2013/10/06 职场文书

建筑设计师岗位职责

2013/11/18 职场文书

安全例会汇报材料

2014/08/23 职场文书

流动人口婚育证明范本

2014/09/26 职场文书

寝室长工作失责检讨书

2014/10/06 职场文书

党支部反对四风思想汇报

2014/10/10 职场文书

酒店财务部岗位职责

2015/04/14 职场文书