使用 webpack 打包，图片地址变成了 [object Module]

最新推荐文章于 2023-04-11 16:30:29 发布
最新推荐文章于 2023-04-11 16:30:29 发布
阅读量1.5k 收藏 1
点赞数 1
分类专栏： 日常开发的小问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44273383/article/details/104778132
版权
在webpack 5.0.0更新后，图片路径出现[object Module]问题，原因是默认启用esModule。解决办法是明确设置esModule选项为false，通过配置示例可了解如何修改。
摘要由CSDN通过智能技术生成

这个问题是 file-loader 在 5.0.0 的更新中造成的：

BREAKING CHANGES

  • minimum required nodejs version is 10.13.0
  • rename the esModules option to esModule
  • switch to ES modules by default (the option esModule is true by default)

从更新日志看到，5.0.0 默认将 esModule 设置为了 true。所以我们只要显示的将它再改为 false 就好了，下面是一段配置示例：

{
   
	test: /\.(png|jpe?g)(\?.*)?$/,
	loader: 'url-loader',
	options:
最低0.47元/天 解锁文章
尹宇星 Kim
关注
专栏目录
控制台图片路径错误，显示[object Module],解决办法
前端程序员、项目经理、人工智能博主
12-04 1273
控制台图片路径错误，显示[object Module],解决办法 控制台报错： 然而我们配置了webpack.config.js的url-loader也没有用 这时候重点来了，看下面 我们可以再webpack的文件中创建一个option对象并加入 esModule: false 如图：我们可以在配置的url-loader中加入 如果还是不行有可能是webpack版本太高可以降低版本，我目前用的是最新的版本 ...
webpack打包图片时url路径处理成[Object Module]的解决方法
m0_52364694的博客
08-25 408
这是由于url-loader与file-loader版本不兼容导致的，目前亲测可用的版本搭配是url-loader0.5.9而file-loader4.2.0
webpack打包html里面img后src为“[object Module]”问题
hahahhahahahha123456的博客
01-01 2553
<!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-Compat...
react项目require导入图片不显示，网页查找元素显示[object module]
weixin_45575273的博客
06-16 2754
解决方法：在你导入图片的后面加上.default
vue加载不出图片显示为[object%20Module]
最新发布
qq_45510043的博客
04-11 868
通过require()方法加载图片
在使用Webpack打包本地img图片文件时 图片加载失败 [object Module] 404 (Not Found)
"✧treasure mountain✧"
04-30 6825
问题描述 在Vue组件里引入了一张本地的图片： <template> <div> <img src="../../images/test.png"> </div> </template> 然后图片就挂了： 顿时一脸懵 因为图片在本地是有的 而且Ctrl+左键也能访问 发现src变成了[object Module]： <i...
【webpack】使用webpack打包图片文件、打包时生成单独的css文件
wusq的博客
10-03 1553
使用webpack打包图片文件 在scr目录下创建image文件夹，并且添加几张图片 在main.js使用import方式引入所有图片，并且append到app节点下 // 引入图片资源 import i1 from './image/image1.png' import i2 from './image/image2.png' // 创建图片对象 let img1 = document.createElement('img') img1.src = i1 let img2 = document.cr
webpack打包图片资源-img标签中src 为 [object Module]
zm_miner的博客
02-02 1115
使用webpack打包图片资源时, 使用 url-loader 可以处理less/css/styles文件中引入的图片资源 但是当在html中直接使用img标签 引入图片时, webpack是不会识别, 如下: img标签中的图片没有显示 所以需要html-loader来(负责引入img, 从而能被url-loader进行处理) 打包成功以后, 会有一个问题, 在打包成功后的build文件下的html中img标签的src引入路径不正确 原因: 因为url-loader默认使用es6模块化解析, 而h
使用 webpack 打包，图片地址变成了 [object object]又或者图片没有报错却加载不出来
weixin_50680057的博客
10-23 1366
当使用webpack对图片进行打包时 执行发现图片路径变为url([object object])实际上这是由于url-loader更新的版本造成的，我们想要图片正确显示就需要在webpack.config.js中将url-loader进行配置，下面是一段配置示例： 图片显示不出来而且还不报错？ 我们可以尝试将limit改为比图片大小改为>（图片尺寸（KB） * 1024）即可 不想改limit值？也可 我们只需在终端中执行npm install file-loader --save-dev命令，安
【Webpack】自定义file-loader时图片解析后出现[object%20Module]
Erin_jwx的博客
08-07 826
手写file-loader视频讲解根据视频教程一顿操作后，编译后请求图片资源时出现404问题 GET http://127.0.0.1:5500/dist/[object%20Module] 404 (Not Found)在搜索引擎里看了半天，很多只是讲了添加这个配置即可，没有说明原理。 仅针对于开源的file-loader，而我们自定义loader，不需要这个配置。能解决问题肯定是配置生效了，所以我直接去看了源码，观察这个配置影响了什么内容 以下为file-loader源码部分内容截取 由此，可以看到es
webpack5打包样式文件、html、jsx中的图片
qq_45327886的博客
03-21 707
webpack5 打包图片 图片无法正常打包 [object%20Module]
使用 webpack 打包vue项目时，图片的URL地址变成了 [object object]又或者图片没有报错却加载不出来的原因
肿肿的博客
01-26 2141
当使用webpack对图片进行打包时，发现图片路径变为url([object object])。这是因为我们在使用url-loader的时候，有一个limit属性，图片实际的大小大于limit指定的大小，因此会去使用file-loader，但项目里面没有这个包，要先用npm安装一下。或者直接将limit调大一点。也有可能是因为url-loader更新的版本造成的。 错误： 因此解决的办法有： 方法一：如果没有报错，但图片没有显示出来。我们只需要在webpack.config.js中将url-loader进
webpack打包html里面img后src为“[object Module]”
小鱼尔呀
04-26 1062
在页面引入图片： webpack配置：（ouptputpath 图片打包输出地址，这里会打包到dist下面的image文件夹） 运行后显示： 解决办法： options 下添加 esModule：false ...
关于图片路径打包为 src= "[object Module]" 的解决方法
weixin_45548211的博客
12-30 1902
检查 file-loader 的版本 当 file-loader 的版本是 4.3.0 及以上，则需要在 webpack.config.js 中手动配置属性 esModule : { test: /\.(jpg|jpeg|png|gif|svg)$/, loader: "file-loader", options: { ...
如何解决vue项目中图片展示的是[object Module]问题
CS13477062349的博客
01-06 7457
vue项目中这样展示图片 <img src="../../images/menu1.png" alt=""> 前端页面展示的数据是[object Module] 在网上找了很多都没找到原因所在，后来看到有人说：一般情况下我们为了能在本地显示效果，写图片路径会直接这样写，但是在实际中图片一般都是动态上传的，所以 我把图片以变量的形式传入，这样就解决了，图片就能在前台正常展示了 ...
亲手搭建vue项目的过程--加载图片 [object%20Module]
HQ DevJ的专栏
05-19 2277
我在用webpack 4.43.0的版本的时候，加载图片显示[object%20Module] ，出现问题当时有点懵，因为我的图片路径是对的，为什么加不出来，之后利用调试工具，看到src中的url为：[object%20Module] ，但是怎么会显示这个呢？有点郁闷，查官方的webpack API看怎么处理？ webpack加载图片有两个loader可以使用，一个是file-loader，一个是url-loader。看这两个loader的相关讲解： file-loader:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值