file-loader打包图片文件时路径错误输出为[object-module]的解决方法


Posted in Javascript onJanuary 03, 2020

最近在学习使用webpack4.0自己搭建vue脚手架,在搭建过程中,踩了许多坑,使用file-loader打包图片文件时就遇到了以下的问题。

这是我的webpack 处理打包图片相关配置项:

...
module: {
 rules: [
 ...
 {
  test: /\.(jpe?g|png|gif|svg)$/i,
  use: [
  {
   loader: 'url-loader',
   options: {
   limit: 10000,
   name: '[name].[ext]',
   outputPath: 'imgs/'
   }
  }
  ]
 },
 ...
 ]
}
...

这个配置也是和目前网上教程差不多的。使用 url-loader 编译图片文件,输出到imgs文件夹下,乍一看也没什么问题,我相信你也是这么认为的。

但是webpack构建之后,会发现,页面上引用的图片都无法正常显示:

file-loader打包图片文件时路径错误输出为[object-module]的解决方法

图片引用错误

打开控制台,会发现所有图片的路径都变成了 [object module]

file-loader打包图片文件时路径错误输出为[object-module]的解决方法

object module

经过一番努力的探索,终于在stackoverflow上找到了 相应的问题

下方回答我翻译下:

默认情况下,file-loader生成使用ES模块语法的JS模块。在某些情况下,使用ES模块是有益的,比如在模块连接和树抖动的情况下。

file-loader打包图片文件时路径错误输出为[object-module]的解决方法

file-loader-options

简而言之就是file-loader新版本默认使用了esModule语法,造成了引用图片文件时的方式和以前的版本不一样,通过查看其仓库的release会发现:在v4.3.0版本就引入这一新特性。

file-loader打包图片文件时路径错误输出为[object-module]的解决方法

file-loader-versions

那如何解决这一问题呢?在刚才的stackoverflow问题回答里说明了有两种解决方法:

在引用图片时,加个 .default 后缀

<img src="require('assets/logo.png').default"/>

在webpack的file-loader配置项里,设置esModule为false

{
 test: /\.(jpe?g|png|gif|svg)$/i,
 use: [
 {
  loader: 'file-loader',
  options: {
  esModule: false
  }
 }
 ]
}

两种方法对比起来,显而易见,相信你已经知道了哪个方法更好用。于是我修改了webpack配置后,再编译,就没问题啦:wink:。

file-loader打包图片文件时路径错误输出为[object-module]的解决方法

build-success

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript Date对象使用总结
May 14 Javascript
javascript设计模式 封装和信息隐藏(上)
Jul 24 Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
Jul 17 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
May 08 Javascript
用JS实现图片轮播效果代码(一)
Jun 26 Javascript
AngularJs基于角色的前端访问控制的实现
Nov 07 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
Aug 31 Javascript
Vue实现todolist删除功能
Jun 26 Javascript
原生JS实现九宫格抽奖
Sep 13 Javascript
vue2和vue3的v-if与v-for优先级对比学习
Oct 10 Javascript
uni-app如何实现增量更新功能
Jan 03 #Javascript
JS实现简单日历特效
Jan 03 #Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
Jan 02 #Javascript
微信小程序地图绘制线段并且测量(实例代码)
Jan 02 #Javascript
Element-UI+Vue模式使用总结
Jan 02 #Javascript
JS代码触发事件代码实例
Jan 02 #Javascript
微信小程序使用自定义组件导航实现当前页面高亮
Jan 02 #Javascript
You might like
DC动画很好看?新作烂得令人发指,名叫《红色之子》
2020/04/09 欧美动漫
Codeigniter的一些优秀特性总结
2015/01/21 PHP
php实现字符串反转输出的方法
2015/03/14 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
PHP获取数组中指定的一列实例
2017/12/27 PHP
PHP微信网页授权的配置文件操作分析
2019/05/29 PHP
js+数组实现网页上显示时间/星期几的实用方法
2013/01/18 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
2013/10/09 Javascript
js 判断上传文件大小及格式代码
2013/11/13 Javascript
在javascript中执行任意html代码的方法示例解读
2013/12/25 Javascript
Nodejs进程管理模块forever详解
2014/06/01 NodeJs
jQuery中position()方法用法实例
2015/01/16 Javascript
JavaScript中for循环的使用详解
2015/06/03 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
2015/08/31 Javascript
JavaScript Math 对象常用方法总结
2016/04/28 Javascript
JS实现动态增加和删除li标签行的实例代码
2016/10/16 Javascript
简单理解vue中Props属性
2016/10/27 Javascript
angularJS深拷贝详解
2017/03/23 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
2020/02/04 Javascript
[03:04]DOTA2英雄基础教程 影魔
2013/12/11 DOTA
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
python定时执行指定函数的方法
2015/05/27 Python
查看django版本的方法分享
2018/05/14 Python
tensorflow将图片保存为tfrecord和tfrecord的读取方式
2020/02/17 Python
Python连接mysql方法及常用参数
2020/09/01 Python
Mytheresa中国官网:德国时尚奢侈品商城
2017/08/04 全球购物
Bally美国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/18 全球购物
毕业求职自荐信格式是什么
2013/11/19 职场文书
《夸父追日》教学反思
2014/02/26 职场文书
《明天,我们毕业》教学反思
2014/04/24 职场文书
师德师风自我评价范文
2014/09/11 职场文书
乡镇干部党的群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
高考升学宴主持词
2019/06/21 职场文书
迎客户欢迎词三篇
2019/09/27 职场文书
一级电子管军用接收机测评
2022/04/05 无线电