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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
webpack file-loader和url-loader的区别
1.前言 如果我们希望在页面引入图片(包括img的src和background的url).当我们基于webpack进行开发时,引入图片会遇到一些问题. 其中一个就是引用路径的问题.拿background样式用url引入背景图来说,我们都知道,webpack最终会将各个模块打包成一个文件,因此我们样式中的url路径是相对入口html页面的,而不是相对于原始css文件所在的路径的.这就会导致图片引入失败.这个问题是用file-loader解决的,file-loader可以解析项目中的url引入(不仅
-
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
本文实例讲述了ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法.分享给大家供大家参考.具体实现方法分析如下: 首先,AjaxFileUploader插件是一个基于jquery的插件,我们可以使用AjaxFileUploader插件来实现文件异步上传功能了,使用这款插件上传文件不要担心兼容性的问题,它的兼容性可以说兼容所有主流浏览器,下面来给大家介绍一个AjaxFileUploader+thinkphp实现文件上传的实例. ThinkPHP框架下用AjaxFileUpl
-
详解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
-
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之图片引入-增强的file-loader:url-loader
前言: 本文介绍了url-loader(增强的file-loader): url-loader作用:根据需求选择性的把某些小图片编码成base64格式写进页面:从而减少服务器请求.优化性能. url-loader解决的问题: 如果图片较多,会发很多http请求,会降低页面性能.url-loader会将引入的图片编码,生成dataURl.相当于把图片数据翻译成一串字符.再把这串字符打包到文件中,最终只需要引入这个文件就能访问图片了.当然,如果图片较大,编码会消耗性能.因此url-loader提供了
-
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()解决方法
目录 常规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照相问题的解决方法,供大家参考,具体内容如下 内容:手机系统的裁剪介绍,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不完整所致.
随机推荐
- Angular.js实现注册系统的实例详解
- JavaScript中exec函数用法实例分析
- 详解angularjs的数组传参方式的简单实现
- jQuery ajax json 数据的遍历代码
- 仿百度联盟对联广告实现代码
- windows下mysql双向同步备份实现方法
- Xcode中iOS应用开发的一般项目目录结构和流程简介
- MyBatis入门之增删改查+数据库字段和实体字段不一致问题处理方法
- Asp.net清空控件值的方法(可自定义控件类型)
- C#判断访问来源是否为搜索引擎链接的方法
- PHP 获取MSN好友列表的代码(2009-05-14测试通过)
- ASP 操作cookies的方法
- IIS7.5显示ASP的详细错误信息"500 – 内部服务器错误解决"
- 简介JavaScript中的getSeconds()方法的使用
- Javascript 错误处理的几种方法
- PowerShell中的函数重载示例
- jquery 圆角遮罩图片实现图片圆角
- 基于Jquery的动态创建DOM元素的代码
- 深入浅析search 搜索框的写法
- 新闻一段时间向上滚动效果