控制台图片路径错误，显示[object Module],解决办法

最新推荐文章于 2024-05-20 11:34:50 发布
最新推荐文章于 2024-05-20 11:34:50 发布
阅读量1.2k 收藏
点赞数
分类专栏： 前端踩坑专栏合集 文章标签： javascript vue.js html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40808668/article/details/106840465
版权
在使用JavaScript、Vue.js和HTML5时，遇到控制台显示图片路径错误为[object Module]的问题。即使配置了webpack.config.js中的url-loader，问题仍未解决。解决方法是在webpack配置的url-loader中添加相关选项。如果问题依旧存在，可能是由于webpack版本过高，尝试降低版本，例如降至最新稳定版。
摘要由CSDN通过智能技术生成

控制台图片路径错误，显示[object Module],解决办法

控制台报错：
在这里插入图片描述
在这里插入图片描述
然而我们配置了webpack.config.js的url-loader也没有用
这时候重点来了，看下面
我们可以再webpack的文件中创建一个option对象并加入

esModule: false

如图：我们可以在配置的url-loader中加入
在这里插入图片描述
如果还是不行有可能是webpack版本太高可以降低版本，我目前用的是最新的版本

嚣张农民
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
记一个webpack加载图像变成src=“[object Module]“问题
蛐蛐的博客
07-20 436
1.简介 使用file-loader或者url-loader加载图片，发现图片src变为[object Module] 2.解决 主要在于esModule选项 默认情况下，file-loader生成使用 ES 模块语法的 JS 模块。 在某些情况下，使用 ES 模块是有益的，例如在模块串联或者tree shaking的情况下。 您可以使用以下方法启用 CommonJS 模块语法： { test: /\.(gif|png|..
图片img标签 src="[object Module]" --学习笔记
热门推荐
simper_boy的博客
12-09 1万+
在使用webpack4初始化项目，基础配置完之后出现的一个问题。如下图 img属性src="[object Module]"，引入图片的方式为 配置的图片loader试了两种都不行：file-loader、url-loader 配置如下 解决办法 在option里面加入 esModule: false ...
图片路径没有转化为base64反而呈现[object Module]
最新发布
faith_girl的博客
05-20 214
可能是因为图片已经被其他的 loader 处理过了，有两个处理 “.jsx” 文件的 loader，它们都使用了 “babel-loader”。当 “url-loader” 接手处理图片时，它实际上处理的是一个模块对象，而不是图片文件。如果问题仍然存在，你可能需要检查你的其他配置或你的环境。例如，你可能需要确认你的图片路径是否正确，或者你可能需要确认你的 “node_modules” 是否包含了正确的 loader 版本。这将告诉 “url-loader” 不要将图片导入转换为 ES6 模块。
解决本地图片无法展示并且浏览器控制台报错：Not allowed to load local resource: file:xxxx
见证自己学习,成长的记录
02-06 9403
解决本地图片无法展示并且浏览器控制台报错：Not allowed to load local resource: file:xxxx
图片路径错误时不显示
Doubleu_的博客
01-22 764
在image的src为空或者错误的时候会显示图标，这个问题ios的没有，安卓的有，例如下图               我用的框架是angular，给图片一个err-src <img class="tit" src='{{urlroot}}{{turl}}' err-src="http://google.com/favicon.ico"/> Directive返回空白 a...
关于图片路径打包为 src= "[object Module]" 的解决方法
weixin_45548211的博客
12-30 1895
检查 file-loader 的版本 当 file-loader 的版本是 4.3.0 及以上，则需要在 webpack.config.js 中手动配置属性 esModule : { test: /\.(jpg|jpeg|png|gif|svg)$/, loader: "file-loader", options: { ...
使用webpackd的url-loader获取不到图片地址出现src=“[object Module]“ 问题
u011608672的博客
01-15 761
webpacke渲染的页面获取不到图片地址问题 代码设置地址相对路径获取图片 页面渲染出现src="[object Module]" 出现问题 webpack.config.js中加载器url-loader的设置问题 原url-loader设置如下 module: { // 这个节点，用于配置 所有 第三方模块 加载器 rules: [ // 所有第三方模块的 匹配规则 { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loa
控制台报错object is not a function的解决方法
09-04
在JavaScript编程中，"object is not a function"的错误通常表示你尝试调用一个对象作为函数，而该对象实际上并不是一个函数。这个问题在给定的描述中是由于一个特殊的命名冲突引起的，涉及到HTML元素的属性名与...
PYQT5实现控制台显示功能的方法
09-19
本篇文章将详细讲解如何使用PyQt5实现控制台显示功能，这对于在GUI程序中实时输出日志或运行结果非常有用。 首先，我们来看一下界面文件`Ui_ControlBoard.py`。这个文件通常是由Qt Designer生成的，它定义了窗口...
IIS安装以及一些错误解决办法
03-11
win7 下IIS手动安装过程以及部分错误解决办法，可能有些地方不正确
python实现在控制台输入密码不显示的方法
12-25
本文实例讲述了python实现在控制台输入密码不显示的方法。分享给大家供大家参考。具体实现方法如下： import console; namespace console{ //控制台读取密码，并显示星号 getPassword = function(){ var tstr = ...
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
10-15
主要介绍了file-loader打包图片文件时路径错误输出为[object-module]的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
处理vue直接引入图片地址时显示不出来的问题 src=“[object Module]“
qq_24418107的博客
10-16 1385
这是因为vue使用的是commonjs语法规范，而file-loader/url-loader使用的es module语法规范，解决方法是处理图片时不适用es module的语法。在webpack中使用vue-loader编译template之后，发现图片加载不出来了，开发人员工具中显示src=“[object Module]”这是因为当vue-loader编译template块之后，会将所有的资源url转换为webpack模块请求。我们需要在vue.config.js里面稍加配置就可以了。
图片传输中的相对路径出现错误的改正方法
w1404273025的博客
04-07 1661
项目场景： 提示：这里简述项目相关背景： 在学习HTML中，遇到了一些路径相关的问题，进行deBug。本品文章包括相对路径，绝对路径。 问题描述 提示：这里描述项目中遇到的问题： 例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据 APP 中接收数据代码： @Override public void run() { bytes = mmInStream.read(buffer); mHandler.obtainMessage(READ_DATA, bytes, -1, buffer
打包图片文件时路径错误输出为[object-module]
shea_mong
04-01 218
错误场景 在使用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在打包图片后出现的问题：background-image显示为“url([object Module])”，图片无法显示
你是我修复不了的bug，但我会用一生去维护
12-01 1667
webpack在打包图片后出现的问题：background-image显示为“url([object Module])”，图片无法显示 原因： 因为url-loader默认使用es6模块化解析，解析时会出现[object Module]。但是webpack5之后就没有这个问题了，可能默认已经配置。 解决方案： 关闭url-loader的es6Module，让他以commonjs的方式解析 在配置中添加：“esModule: false” { // 问题：默认处理不了html中
基于cli4,在用Vue做项目时导入图片出现[object module],已解决
qq_31392495的博客
03-16 807
现象： 这个错误是我在用vue-cli中使用webpack打包的时候，页面内容已经展示出来但是图片显示不出来，一看引用链接src为"[object Module]"的问题。 出错原因： 也是找到了大佬的博客看到的，他说这个是file-loader的版本问题，我现在的file-loader版本是^6.2.0。原来file-loader里面有一个esModule的配置，低版本默认为false，高版本默认为true 解决方案： 降低file-loader版本为^4.2.0 新版本直接设置esModule的属性
如何解决vue项目中图片展示的是[object Module]问题
艺艺艺艺儿ya的博客
09-06 828
vue项目中这样展示图片，却没有显示图片 <img src="../../images/menu1.png" alt=""> 前端页面展示的数据是[object Module] <img :src='menu1' alt=""> //注意： src是属性绑定 <script> import menu1 from "../../images/menu1.png" import menu2 from "../../images/menu2.png" import me
数组元素显示[object htmlselectelement]解决办法
05-18
这个问题通常是因为您在访问数组元素时，使用了错误的属性或方法，导致返回了一个 HTMLSelectElement 对象而不是预期的值。 您可以检查以下几点来解决这个问题： 1. 检查您的代码中是否有拼写错误或语法错误。 2. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

嚣张农民

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值