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

ppk谈JavaScript style属性

Oct 10 Javascript

海量经典的jQuery插件集合

Jan 12 Javascript

jquery.tmpl JQuery模板插件

Oct 10 Javascript

jQuery.extend()、jQuery.fn.extend()扩展方法示例详解

May 08 Javascript

jQuery实现带滚动导航效果的全屏滚动相册实例

Jun 19 Javascript

JavaScript中省略元素对数组长度的影响

Oct 26 Javascript

BootStrap table删除指定行的注意事项(笔记整理)

Feb 05 Javascript

JS通过调用微信API实现微信支付功能的方法示例

Jun 29 Javascript

详解JavaScript按概率随机生成事件

Aug 02 Javascript

讲解vue-router之什么是编程式路由

May 28 Javascript

vue填坑之webpack run build 静态资源找不到的解决方法

Sep 03 Javascript

Vue插槽原理与用法详解

Mar 05 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程序的php代码

2008/04/07 PHP

php根据操作系统转换文件名大小写的方法

2014/02/24 PHP

PHP使用适合阅读的格式显示文件大小的方法

2015/03/05 PHP

Laravel5.1自定义500错误页面示例

2016/10/09 PHP

PJBlog插件防刷新的在线播放器

2006/10/25 Javascript

在JavaScript中通过URL传递汉字的方法

2007/04/09 Javascript

仅IE6/7/8中innerHTML返回值忽略英文空格的问题

2011/04/07 Javascript

浅谈关于JavaScript的语言特性分析

2013/04/11 Javascript

解决WordPress使用CDN后博文无法评论的错误

2015/12/15 Javascript

详解JS几种变量交换方式以及性能分析对比

2016/11/25 Javascript

微信小程序 HTTPS报错整理常见问题及解决方案

2016/12/14 Javascript

微信小程序解决swiper不显示图片的方法

2017/01/04 Javascript

小发现之浅谈location.search与location.hash的问题

2017/06/23 Javascript

给vue项目添加ESLint的详细步骤

2017/09/29 Javascript

微信小程序修改swiper默认指示器样式的实例代码

2018/07/18 Javascript

javascript实现导航栏分页效果

2019/06/27 Javascript

JS查找孩子节点简单示例

2019/07/25 Javascript

Vue+abp微信扫码登录的实现代码示例

2020/01/06 Javascript

React倒计时功能实现代码——解耦通用

2020/09/18 Javascript

微信小程序实现日历签到

2020/09/21 Javascript

antd 表格列宽自适应方法以及错误处理操作

2020/10/27 Javascript

Python 12306抢火车票脚本

2018/02/07 Python

Django自定义过滤器定义与用法示例

2018/03/22 Python

解决tensorflow1.x版本加载saver.restore目录报错的问题

2018/07/26 Python

Python网络爬虫之爬取微博热搜

2019/04/18 Python

Python封装成可带参数的EXE安装包实例

2019/08/24 Python

HTML5 canvas画矩形时出现边框样式不一致的解决方法

2013/10/14 HTML / CSS

HTML5所有标签汇总及标签意义解释

2015/03/12 HTML / CSS

error和exception有什么区别

2012/10/02 面试题

洗煤厂厂长岗位职责

2014/01/03 职场文书

大学生职业生涯规划书范文

2014/01/14 职场文书

学年自我鉴定

2014/01/16 职场文书

中国梦读书活动总结

2014/07/10 职场文书

派出所班子党的群众路线对照检查材料思想汇报

2014/10/01 职场文书

Python基础之常用库常用方法整理

2021/04/30 Python

python自动化测试之Selenium详解

2022/03/13 Python