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淡入淡出效果的实现思路
Mar 31 Javascript
javascript针对DOM的应用分析(三)
Apr 15 Javascript
javascript SpiderMonkey中的函数序列化如何进行
Dec 05 Javascript
JavaScript中“基本类型”之争小结
Jan 03 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
Dec 02 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
Vue-Router模式和钩子的用法
Feb 28 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
Apr 04 Javascript
微信小程序实现人脸检测功能
May 25 Javascript
javascript将非数值转换为数值
Sep 13 Javascript
关于JS解构的5种有趣用法
Sep 05 Javascript
vue数据响应式原理知识点总结
Feb 16 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
PHPMyadmin 配置文件详解(配置)
2009/12/03 PHP
php中并发读写文件冲突的解决方案
2013/10/25 PHP
PHP使用curl制作简易百度搜索
2016/11/03 PHP
JavaScript 继承的实现
2009/07/09 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
2013/04/23 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
2015/11/21 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
js微信分享API
2020/10/11 Javascript
浅谈js常用内置方法和对象
2016/09/24 Javascript
js中利用cookie实现记住密码功能
2020/08/20 Javascript
javascript判断firebug是否开启的方法
2016/11/23 Javascript
基于ajax与msmq技术的消息推送功能实现代码
2016/12/26 Javascript
JS中用try catch对代码运行的性能影响分析
2016/12/26 Javascript
canvas绘制环形进度条
2017/02/23 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
jQuery中常用动画效果函数知识点整理
2018/08/19 jQuery
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
Python实现Linux下守护进程的编写方法
2014/08/22 Python
wxPython实现窗口用图片做背景
2018/04/25 Python
python实现时间o(1)的最小栈的实例代码
2018/07/23 Python
keras 多任务多loss实例
2020/06/22 Python
Python常驻任务实现接收外界参数代码解析
2020/07/21 Python
高山背包:High Sierra
2017/11/23 全球购物
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
什么是Smart Navigation?
2016/07/03 面试题
劳动之星获奖感言
2014/02/01 职场文书
网管求职信
2014/03/03 职场文书
条幅标语大全
2014/06/20 职场文书
关于爱国的标语
2014/06/24 职场文书
幼儿园园长个人总结
2015/03/02 职场文书
党校个人总结
2015/03/04 职场文书
《狼王梦》读后感:可怜天下父母心
2019/11/01 职场文书