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

层序遍历在ExtJs的TreePanel中的应用

Oct 16 Javascript

javascript设计模式接口介绍

Jul 24 Javascript

javascript操纵OGNL标签示例代码

Jun 16 Javascript

JS+CSS实现仿新浪微博搜索框的方法

Feb 24 Javascript

jQuery关键词说明插件cluetip使用指南

Apr 21 Javascript

jQuery Mobile 触摸事件实例

Jun 04 Javascript

浅谈Node.js：理解stream

Dec 08 Javascript

通过npm引用的vue组件使用详解

Mar 02 Javascript

详解AngularJs路由之Ui-router-resolve（预加载）

Jun 13 Javascript

VUE重点问题总结

Mar 19 Javascript

在 Vue 项目中引入 tinymce 富文本编辑器的完整代码

May 04 Javascript

BootStrap前端框架使用方法详解

Feb 26 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访问MYSQL数据库封装类(附函数说明)

2010/12/04 PHP

php调用Google translate_tts api实现代码

2013/08/07 PHP

PHP中让json_encode不自动转义斜杠“/”的方法

2017/02/28 PHP

php实现购物车功能（以大苹果购物网为例）

2017/03/09 PHP

tp5框架基于Ajax实现列表无刷新排序功能示例

2020/02/10 PHP

jquery简单实现鼠标经过导航条改变背景图

2013/12/17 Javascript

JavaScript中的原型链prototype介绍

2014/12/30 Javascript

使用npm发布Node.JS程序包教程

2015/03/02 Javascript

jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍

2016/09/01 Javascript

微信小程序 rpx 尺寸单位详细介绍

2016/10/13 Javascript

浅谈js中startsWith 函数不能在任何浏览器兼容的问题

2017/03/01 Javascript

详解nodejs微信公众号开发——2.自动回复

2017/04/10 NodeJs

一个Vue视频媒体多段裁剪组件的实现示例

2018/08/09 Javascript

基于JavaScript实现一个简单的Vue

2018/09/26 Javascript

jQuery.validate.js表单验证插件的使用代码详解

2018/10/22 jQuery

vue项目设置scrollTop不起作用(总结)

2018/12/21 Javascript

详解ES7 Decorator 入门解析

2019/02/18 Javascript

浅谈Vue.set实际上是什么

2019/10/17 Javascript

Vue实现剪切板图片压缩功能

2020/02/04 Javascript

vue+element-ui JYAdmin后台管理系统模板解析

2020/07/28 Javascript

js仿淘宝放大镜效果

2020/12/28 Javascript

Python全排列操作实例分析

2018/07/24 Python

解决Python print输出不换行没空格的问题

2018/11/14 Python

python构建指数平滑预测模型示例

2019/11/21 Python

Python调用.net动态库实现过程解析

2020/06/05 Python

Python实现文件压缩和解压的示例代码

2020/08/12 Python

加拿大时尚少女服装品牌：Garage

2016/10/10 全球购物

英国手机壳购买网站：Case Hut

2019/04/11 全球购物

高三毕业寄语

2014/04/10 职场文书

教师产假请假条范文

2014/04/10 职场文书

解除劳动合同协议书范本

2014/04/14 职场文书

关于中国梦的演讲稿

2014/04/23 职场文书

民族团结先进集体事迹材料

2014/05/22 职场文书

高等教育学专业自荐书

2014/06/17 职场文书

创业计划书之少年玩具店

2019/09/05 职场文书

解决jupyter notebook启动后没有token的坑

2021/04/24 Python