webpack打包图片时url路径处理成[Object Module]的解决方法

最新推荐文章于 2023-04-11 16:30:29 发布
最新推荐文章于 2023-04-11 16:30:29 发布
阅读量451 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_52364694/article/details/119911071
版权

这是由于url-loader与file-loader版本不兼容导致的，目前亲测可用的版本搭配是url-loader0.5.9而file-loader4.2.0

记一个webpack加载图像变成src=“[object Module]“问题
蛐蛐的博客
07-20 557
1.简介 使用file-loader或者url-loader加载图片，发现图片src变为[object Module] 2.解决 主要在于esModule选项 默认情况下，file-loader生成使用 ES 模块语法的 JS 模块。 在某些情况下，使用 ES 模块是有益的，例如在模块串联或者tree shaking的情况下。 您可以使用以下方法启用 CommonJS 模块语法： { test: /\.(gif|png|..
打包图片文件时路径错误输出为[object-module]
shea_mong
04-01 279
错误场景 在使用webpack打包，内部代码并非 ES Modules 规范，而是 CommonJS 或是 AMD 规范。运行时报错。 在 main.js 中添加图片 // // 2. 支持 CommonJS 的 require 声明 const createHeading = require('./heading.js').default const better = require('./better.png') require('./main.css') const heading = create
使用 webpack 打包，图片地址变成了 [object Module]
猿海无涯，码农无边
03-10 1642
这个问题是 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...
webpack：url-loader打包img后src为[object Module]
彭世瑜的博客
11-11 2112
引入图片的方式 <!-- 相对路径引入 --> <img src="./logo.jpg" alt=""> <!-- 绝对路径引入 --> <img src="@/assets/logo.jpg" alt=""> <!-- 引入static文件, 不会处理 --> <img src="/static/logo.jpg" alt=""> webapck 配置文件 { test: /\.(jpg|png|gif|jpeg|woff
webpack中使用url-loader配置图片时出现问题：background:url([object Module])
hzw的博客
08-11 605
webpack中使用url-loader配置图片时出现问题：background:url([object Module]) 解决： 在配置文件 webpack.config.js 中，修改配置为： { test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: [{ loader: 'url-loader', options: { limit: 16940, esModule: false } }] } 重新运行 npm
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
11-29
本篇文章将探讨一个常见的问题：当使用file-loader打包图片文件时，路径错误地输出为`[object Module]`，并提供解决方案。 首先，我们要理解这个问题的根源。在webpack配置中，通常我们会用`url-loader`或`file-...
webpack打包发布中的图片路径问题记录：报错图片找不到、打包路径下没有生成images文件夹或少打包图片、打包之后打开页面img标签src=“[object Module]“
H_xiang_xiang的博客
06-30 1889
文章目录报错图片找不到打包路径下没有生成images文件夹或少打包图片打包之后打开页面img标签src="[object Module]" 最终打包结果结构 报错图片找不到 原本配置： 我在 development 模式下测试的时候，是把主页 index.html 和 bundle.js 都放在虚拟内存中，即通过http://localhost:port/就可以直接访问 还在使用webpack-dev-server的时候设置了 –content-base src ，也就是说静态资源的根目录是 src 所
在使用Webpack打包本地img图片文件时 图片加载失败 [object Module] 404 (Not Found)
"✧treasure mountain✧"
04-30 6927
问题描述 在Vue组件里引入了一张本地的图片： <template> <div> <img src="../../images/test.png"> </div> </template> 然后图片就挂了： 顿时一脸懵 因为图片在本地是有的 而且Ctrl+左键也能访问 发现src变成了[object Module]： <i...
webpack打包图片资源-img标签中src 为 [object Module]
zm_miner的博客
02-02 1184
使用webpack打包图片资源时, 使用 url-loader 可以处理less/css/styles文件中引入的图片资源 但是当在html中直接使用img标签 引入图片时, webpack是不会识别, 如下: img标签中的图片没有显示 所以需要html-loader来(负责引入img, 从而能被url-loader进行处理) 打包成功以后, 会有一个问题, 在打包成功后的build文件下的html中img标签的src引入路径不正确 原因: 因为url-loader默认使用es6模块化解析, 而h
【webpack】使用webpack打包图片文件、打包时生成单独的css文件
wusq的博客
10-03 1625
使用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打包图片的时候，发现图片的src的值是[object Moudle]的值
sxs7970的博客
07-23 149
在打包xxx.html中的img的时候，需要通过html-loader进行处理，如果不用则xxx.html中的img不会被打包，这个loader的作用就是，负责引入img，从而能被url-loader进行处理 问题：html-loader引入图片是以commonjs(node的)，而url-loader默认是以es6模块化解析，所以导致出错 解决： 需要在进行图片处理的loader中进行处理 rules:[ { test:/\.(png|jpg|gih)$/, loader:'url-loade.
webpack在配置图片时出现的问题：backgroud的“url([object Module])”显示，在浏览器中显示样式被删除线覆盖
weixin_45580220的博客
06-10 794
webpack在配置图片时出现的问题：backgroud的“url([object Module])”显示，在浏览器中显示样式被删除线覆盖 1.0 其中css样式添加如下 @font-size:50px; @font-color:yellow; body{ background: url("../img/1.jpg"); } div{ width: 200px; height: 200px; background-image: url(../img/1.jpg); } 其中
【Webpack】自定义file-loader时图片解析后出现[object%20Module]
Erin_jwx的博客
08-07 920
手写file-loader视频讲解根据视频教程一顿操作后，编译后请求图片资源时出现404问题 GET http://127.0.0.1:5500/dist/[object%20Module] 404 (Not Found)在搜索引擎里看了半天，很多只是讲了添加这个配置即可，没有说明原理。 仅针对于开源的file-loader，而我们自定义loader，不需要这个配置。能解决问题肯定是配置生效了，所以我直接去看了源码，观察这个配置影响了什么内容 以下为file-loader源码部分内容截取 由此，可以看到es
vue中图片路径渲染成：url([object Moudle])，图片和字体图标不显示的解决办法
m0_51608940的博客
07-26 1257
1、问题 在vue项目中，引入图片（背景图或img图片） .bg{display:inline-block;width: 43px;height: 14px;background: url(../../assets/maxs.png) 0 0 no-repeat; background-size: 43px 14px;margin-left: 5px;} 最后图片路径被渲染url([object Moudle])。 字体图标的引入方式正确，最后渲染到页面中却不显示。 2、原因 用于打包图片、字体图标文件的
使用webpackd的url-loader获取不到图片地址出现src=“[object Module]“ 问题
u011608672的博客
01-15 805
webpacke渲染的页面获取不到图片地址问题 代码设置地址相对路径获取图片 页面渲染出现src="[object Module]" 出现问题 webpack.config.js中加载器url-loader的设置问题 原url-loader设置如下 module: { // 这个节点，用于配置 所有 第三方模块 加载器 rules: [ // 所有第三方模块的 匹配规则 { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loa
基于cli4,在用Vue做项目时导入图片出现[object module],已解决
qq_31392495的博客
03-16 877
现象： 这个错误是我在用vue-cli中使用webpack打包的时候，页面内容已经展示出来但是图片显示不出来，一看引用链接src为"[object Module]"的问题。 出错原因： 也是找到了大佬的博客看到的，他说这个是file-loader的版本问题，我现在的file-loader版本是^6.2.0。原来file-loader里面有一个esModule的配置，低版本默认为false，高版本默认为true 解决方案： 降低file-loader版本为^4.2.0 新版本直接设置esModule的属性
使用 webpack 打包vue项目时，图片的URL地址变成了 [object object]又或者图片没有报错却加载不出来的原因
肿肿的博客
01-26 2267
当使用webpack对图片进行打包时，发现图片路径变为url([object object])。这是因为我们在使用url-loader的时候，有一个limit属性，图片实际的大小大于limit指定的大小，因此会去使用file-loader，但项目里面没有这个包，要先用npm安装一下。或者直接将limit调大一点。也有可能是因为url-loader更新的版本造成的。 错误： 因此解决的办法有： 方法一：如果没有报错，但图片没有显示出来。我们只需要在webpack.config.js中将url-loader进
vue加载不出图片显示为[object%20Module]
qq_45510043的博客
04-11 989
通过require()方法加载图片
require引入的图片地址被解析为[object Module]
Absurd_people的博客
07-25 727
require引入的图片地址被解析为[object Module]
vue项目图片路径
最新发布
03-31
### Vue 项目中图片路径配置与引用的解决方案 在 Vue 项目的开发过程中，图片路径的正确配置和引用是一个常见的问题。以下是针对该问题的具体解决方法： #### 方法一：动态加载图片 通过 `require` 或者 `import` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值