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

最近在学习使用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构建之后，会发现，页面上引用的图片都无法正常显示：

图片引用错误

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

object module

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

下方回答我翻译下：

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

file-loader-options

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

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:。

build-success

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法

    本文实例讲述了ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法.分享给大家供大家参考.具体实现方法分析如下: 首先,AjaxFileUploader插件是一个基于jquery的插件,我们可以使用AjaxFileUploader插件来实现文件异步上传功能了,使用这款插件上传文件不要担心兼容性的问题,它的兼容性可以说兼容所有主流浏览器,下面来给大家介绍一个AjaxFileUploader+thinkphp实现文件上传的实例. ThinkPHP框架下用AjaxFileUpl

  • CocoaPods 出现LoadError - cannot load such file -- nanaimo错误解决办法

    CocoaPods 出现LoadError - cannot load such file -- nanaimo错误解决办法 如果经常使用 CocoaPods 进行个人类库的提交和更新,那么肯定会遇到这样的一个错误.如题:LoadError - cannot load such file -- nanaimo,翻译过来就是 LoadError - 无法加载此类文件 - nanaimo.该错误产生的时机一般是在验证 .podspec 文件的时候.具体的错误呈现形式是这样的: benpaobaode

  • 详解Webpack loader 之 file-loader

    简介 安装 npm install --save-dev file-loader 用法 默认情况下,生成的文件的文件名就是文件内容的 MD5 哈希值并会保留所引用资源的原始扩展名. import img from './webpack-logo.png' webpack.config.js module.exports = { module: { rules: [ { test: /\.(png|jpg|gif)$/, use: [ { loader: 'file-loader', option

  • 详解webpack之图片引入-增强的file-loader：url-loader

    前言: 本文介绍了url-loader(增强的file-loader): url-loader作用:根据需求选择性的把某些小图片编码成base64格式写进页面:从而减少服务器请求.优化性能. url-loader解决的问题: 如果图片较多,会发很多http请求,会降低页面性能.url-loader会将引入的图片编码,生成dataURl.相当于把图片数据翻译成一串字符.再把这串字符打包到文件中,最终只需要引入这个文件就能访问图片了.当然,如果图片较大,编码会消耗性能.因此url-loader提供了

  • webpack file-loader和url-loader的区别

    1.前言 如果我们希望在页面引入图片(包括img的src和background的url).当我们基于webpack进行开发时,引入图片会遇到一些问题. 其中一个就是引用路径的问题.拿background样式用url引入背景图来说,我们都知道,webpack最终会将各个模块打包成一个文件,因此我们样式中的url路径是相对入口html页面的,而不是相对于原始css文件所在的路径的.这就会导致图片引入失败.这个问题是用file-loader解决的,file-loader可以解析项目中的url引入(不仅

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

    最近在学习使用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: '

  • 当恢复sqlserver bak文件时，原始的用户无法删除的解决方法

    你无法创建一个相同的用户并mapping这个用户到数据库, 并且你无法删除数据库的用户:DemoUser. 请运行以下脚本, 之后你就可以删除用户:DemoUser.然后创建用户(DemoUser.)并mapping到数据库. 脚本: 复制代码 代码如下: GO ALTER AUTHORIZATION ON ROLE::[aspnet_Membership_BasicAccess] TO [dbo] GO GO ALTER AUTHORIZATION ON ROLE::[aspnet_Membe

  • android图片文件的路径地址与Uri的相互转换方法

    一个android文件的Uri地址一般如下: content://media/external/images/media/62026 这是一张图片的Uri,那么我们如何根据这个Uri获得其在文件系统中的路径呢? 其实很简单,直接上代码: public static String getRealFilePath( final Context context, final Uri uri ) { if ( null == uri ) return null; final String scheme

  • 浅谈python 调用open()打开文件时路径出错的原因

    昨晚搞鼓了一下python的open()打开文件 代码如下 def main(): infile =open("C:\Users\Spirit\Desktop\bc.txt",'r') data = infile.read() print(data) main() 然而结果总报错invaild argument 或者cant found such file *** 查找问题后 发现是由于python中的 '\' 是转义符号,要想输出\ 的办法有两种 1 .在\后再加\ 就是\\ 的形式

  • pyinstaller打包单文件时--uac-admin选项不起作用怎么办

    使用pyinstaller能很方便的将python脚本打包成单个exe文件. 但是最近有一个需求,打包出来的exe文件需要用管理员权限执行! 也就是双击exe文件运行时,需要弹出一个uac界面让用户授权. 于是我查找pyinstaller的官方文档,说是在打时包加上--uac-admin参数就行了! 然而我实际操作了一下,发现直接加上这个参数仅在打包成多文件时有效 ,打包成单文件时是没用的. 但是我就想打包成单个exe文件,又要uac用户授权界面,怎么办? 好,解决方案: 如图,现在我们有一个t

  • php将图片文件转换成二进制输出的方法

    本文实例讲述了php将图片文件转换成二进制输出的方法.分享给大家供大家参考.具体实现方法如下: header( "Content-type: image/jpeg"); $PSize = filesize('1.jpg'); $picturedata = fread(fopen('1.jpg', "r"), $PSize); echo $picturedata; 就这么简单4行代码,就将图片以二进制流的形式输出到客户端了,和打开一张图片没有任何区别. 这里需要注意的

  • php遇到错误Call to undefined function ImageCreate()解决方法

    php遇到错误Call to undefined function ImageCreate()解决方法

    目录 常规Ubuntu与windows 编译make安装方法 phpize方法 centos安装GD库 在使用php处理一些图像时,有时会出现诸如这样的错误:Call to undefined function imagecreate() 这是由于没有安装或是没有开启php的gd库导致的问题. 常规Ubuntu与windows 解决方案: 一.在linux系统(这里用的是Ubuntu系统)下 首先在终端输入下列命令: sudo apt-get install php5-gd 这样就已经安装完ph

  • Android调用系统图片裁剪限定尺寸及7.0照相问题的解决方法

    Android调用系统图片裁剪限定尺寸及7.0照相问题的解决方法

    本文实例为大家分享了Android调用系统图片裁剪限定尺寸及7.0照相问题的解决方法,供大家参考,具体内容如下 内容:手机系统的裁剪介绍,7.0调用相机崩溃解决 代码如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="h

  • 一个applicationContext 加载错误导致的阻塞问题及解决方法

    问题为对接一个sso的验证模块,正确的对接姿势为,接入一个 filter, 然后接入一个 SsoListener . 然而在接入之后,却导致了应用无法正常启动,或者说看起来很奇怪,来看下都遇到什么样的问题,以及是如何处理的? 还是 web.xml, 原本是这样的: (很简洁!) <?xml version="1.0" encoding="UTF-8" ?> <web-app xmlns="http://java.sun.com/xml/n

  • Android Studio使用Kotlin时,修改代码后运行不生效的解决方法

    问题现象 前段时间升级 Android Studio 3.1.3+ 版本后,决定尝试使用 Kotlin 做 APP 开发看看.结果却发现,修改 String 资源后,"运行",修改的内容没有生效.一开始以为只是 String 资源是这样,于是试了下 kt 文件,结果发现"运行"也不能生效. 但是先 clean 了,再"运行",却可以正常编译出来.查了好久发现是 New Module 后,Run/Debug Configurations不完整所致.

随机推荐