vue img 图片不显示 vue中图片不显示路径显示 [Object Object]

最新推荐文章于 2023-04-11 16:30:29 发布
原创 最新推荐文章于 2023-04-11 16:30:29 发布 · 2.1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #js #javascript #es6

本文详细介绍了在Vue项目中解决图片不显示的问题，包括如何正确使用import导入图片资源，以及在data中定义图片路径的方法。同时，针对Vue中for循环显示图片的常见错误，提供了有效的解决方案。

vue img 图片不显示vue中img 直接使用 url=“@/。。。” 路径会报 url="[Object Oject]" 错误，
可以使用 import img from "@/ass“
然后在data中 img ： img

vue for 循环显示的图片，正常绝对路径可以显示出来，但是经过for循环同样的路径的话却无法显示
应该是定义成
dataArray ：{
img：require(’@/img/123/png/)
}

这样就可以完美显示了
vue3 - vite项目打包部署服务器上线后图片不显示并且路径中存在undefined字眼，本地开发环境下正常显示图像没任何问题，但build编译打包后上传到线上服务器后再打开就不显示了，路径有问题
高级前端工程师
08-18 4645
vue3，vite，图片不显示，图像加载失败，打包后图片路径不对，前面多了一个undefined，本地没问题只要打包上线就报错，vue3 vite项目解决部署线上图片URL失效问题，使用本地图片打包后不显示，本地资源路径，本地图片图标，图标不显示，打包后图片失效的问题，访问图片/图标不显示的问题，vue3+vite打包后图片路径错误不显示，背景图打包之后访问路径错误问题的解决，打包部署到服务器上却显示路径undefined问题，图片url域名错误，导致无法显示，还是报错显示不了，如何解决，无效，还是不行，r
vue识别不了.ico后缀的图片，显示[object Module]
ME_GIRL的博客
08-15 922
1.vue识别不了.ico后缀的图片，显示[object Module] 报错如下： 2.vue.config.js配置 module.exports = { chainWebpack: config => { config.module .rule('images') .test(/\.(png|jpe?g|gif|ico)$/i) .use('url-loader') .loader('url-loader') .t
vue3+vite项目，动态svg build后，线上找不到图片问题
qq_41261490的博客
06-20 3971
好多时候，我们使用是svg都是动态的，就会有不同的src，这时，src就需要是一个动态的变量。我们按常规配置： 模板使用 上面这样使用，在本地都是找不到文件的。 但是直接在模板中这样使用是可以的 这是因为，把变量解析成了字符串，没有按路径去查找。 模板使用 上述这样使用，在本地是没有问题的，但是部署到线上就找不到了，查看源代码，线上把src最终解析成了[Object Object],可见打包后，没有去解析出真正的路径。 费了老半天劲，各种方式去试过，最后在vite文档中找到了答案； URL方式，不能使用模板
vue项目中图片路径显示object的解决办法，亲测：十分有效
k912120的博客
12-03 4405
今天遇到了一件奇怪的事，作为游走在前端边缘的非专业人员，特意记录一下以下现象，及解决办法： 1.运行项目，突然出现：“Error: Cannot find module 'webpack/bin/config-yargs'”报错，之前还好好的，经过网上教程解决了这一问题； 参考博客：https://blog.youkuaiyun.com/longzhoufeng/article/details/81...
使用 webpack 打包vue项目时，图片的URL地址变成了 [object object]又或者图片没有报错却加载不出来的原因
肿肿的博客
01-26 2348
当使用webpack对图片进行打包时，发现图片路径变为url([object object])。这是因为我们在使用url-loader的时候，有一个limit属性，图片实际的大小大于limit指定的大小，因此会去使用file-loader，但项目里面没有这个包，要先用npm安装一下。或者直接将limit调大一点。也有可能是因为url-loader更新的版本造成的。 错误： 因此解决的办法有： 方法一：如果没有报错，但图片没有显示出来。我们只需要在webpack.config.js中将url-loader进
关于vue中赋值图片无法显示src=“[Object,Object]”的问题
qq_27808079的博客
01-04 2606
第一种该方法：亲测有效 如图显示，下面我就给一个简单粗暴的方法， 我们直接可以在请求到的数据接口里面直接这样赋值 this.refs[‘imgUrl’].src=“this.imgData” 第二种该方法，无亲测，有测过的小伙伴可以在评论区留言给哈 ...
vue中赋值图片无法显示src=“[object,Object]”
微光无限的博客
11-18 994
vue中赋值图片无法显示 src=“[object,Object]”
移动端页面在ios中不显示图片的解决方法
08-28
在移动端Web开发中，iOS设备有时会出现图片无法显示的问题，这可能会给用户带来不愉快的体验。本文将探讨这个问题，并提供一种解决方案。 首先，我们需要理解这个问题的根源。iOS设备的Safari浏览器对于图片的处理...
vue实现图片按比例缩放问题操作
10-14
在Vue框架中，实现图片按比例缩放是一个常见的需求，特别是在布局设计中，保持图片的原始比例至关重要，以免导致图片失真。以下是如何在Vue中处理这个问题的详细步骤和相关知识点： 1. **图片比例计算**： 当需要...
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
11-29
本篇文章将探讨一个常见的问题：当使用file-loader打包图片文件时，路径错误地输出为`[object Module]`，并提供解决方案。 首先，我们要理解这个问题的根源。在webpack配置中，通常我们会用`url-loader`或`file-...
如何解决vue项目中图片展示的是[object Module]问题
CS13477062349的博客
01-06 7688
vue项目中这样展示图片 <img src="../../images/menu1.png" alt=""> 前端页面展示的数据是[object Module] 在网上找了很多都没找到原因所在，后来看到有人说：一般情况下我们为了能在本地显示效果，写图片路径会直接这样写，但是在实际中图片一般都是动态上传的，所以 我把图片以变量的形式传入，这样就解决了，图片就能在前台正常展示了 ...
解决Vue中img图像src变成“[object Module]“无法正确加载的问题
qiao_qiao_happy的博客
09-14 1859
解决Vue中img图像src变成"[object Module]"无法正确加载的问题 https://www.jianshu.com/p/0877ce441561 解决方案 这是因为file-loader默认采用ES模块语法，即import ‘…/image.png’；然而Vue生成的是CommonJS模块语法，即require(’…/image.png’)；二者不一致。要么让file-loader或url-loader采用CommonJS语法，要么让Vue采用ES语法。 刚好file-loader或url
完美解决img绝对地址在网络上无法显示的问题
hh1297240789的博客
04-18 4020
这个是我今天无意间遇到的一个问题，我将文件上传到一个文件之中，但是我用img访问绝对路径的方法却怎么也无法在网站之中打开，却可以在eclipse中打开，如下图所示 这个实在eclipse中打开的场景 这个是在safari中打开的场景 这个是我的原代码，我直接访问的我图片所在的根目录，如图所示出了问题 下面我们可以看一下这个图片的地址是参数信息，我们直接访问该地址发现是我们熟悉的404，这就...
vue子组件书写img报错 [object%20Object]:1 GET http://localhost:8080/[object%20Object] 404 (Not Found)
Dreamer_Ji的博客
07-27 4338
小白在遇到这个问题的时候抓破脑子找了很多办法才成功解决了。 解决办法： 将地址通过import进行导入，在引用的时候采用属性绑定的方式进行进行使用便能解决问题，此办法主要针对的是子组件使用img。 ...
vue加载不出图片显示为[object%20Module]
qq_45510043的博客
04-11 1038
通过require()方法加载图片
vue img路径中中无法识别 ~@
u014685642的博客
03-25 2803
在标签中直接使用字符串可以正常加载图片的 <img src="~@/**img.jpg"> 但假如使用的是变量却变成了找不到图片 <img :src="src"> 对早过变量输出的字符串是一样的，那么我就需要检查真实的加载路径是否一致 使用变量的加载路径 http://localhost:8091/@/assets/**.jpg 使用字符串的加载路径 http://localhost:8091/static/**.jpg 我有理由相信是作为变量操作缺少某个转
入参显示内容为[object Object]
你若盛开，清风自来
08-05 1462
[object Object]是对象的字符串形式，因为隐式调用了 Object 对象的 toString() 方法，所以显示形式是："[object Object]"。 [object Object] 表示的就只是一个对象，当前对象 toString() 没有正确解析，可以使用 JSON.stringify() 来避免这个问题。 说明： Json.stringify() 是序列化函数，用于将对象转化为字符串； Json.parse() 是反序列化函数，用于将字符串转化为 Json 对象； ...
webpack 设置img 的src属性出现 [object Object]
weixin_42429220的博客
08-10 1297
第一步 webpack配置url-loader、file-loader 配置 { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', exclude:[resolve('src/icons/svg')], options: { esModule: false, //
Img中src路径变成Object问题处理
gyueh的博客
12-16 2463
处理办法： 关闭浏览器，重新启动项目
vue img 规定宽高厚，图片显示不正常
最新发布
12-30
### Vue 中 `img` 标签设置宽高后图片显示异常的解决方案 在 Vue 项目中遇到 `img` 的 `src` 已经成功加载，也给 `<img>` 设置了宽高等样式属性，但在浏览器审查元素时发现宽高仍然为零的问题。这通常是因为 CSS 渲染顺序或父级容器布局的影响。 #### 方法一：确保父级容器有明确的高度和宽度 如果子元素（即图像）被赋予了百分比尺寸，则其父级容器必须具有明确的高度和宽度。否则，这些相对单位将不起作用[^1]。 ```css .parent-container { width: 100%; /* 或者具体数值 */ height: auto; /* 如果希望保持纵横比 */ } .child-img { max-width: 100%; height: auto; } ``` #### 方法二：利用 padding-bottom 实现响应式设计 对于特定比例的图片，可以通过调整内边距来维持正确的宽高比。例如，对于宽高比为 1:1 的正方形图片，可以使用如下方式： ```css .responsive-image-wrapper { position: relative; overflow: hidden; } .responsive-image-wrapper::before { content: ""; display: block; padding-top: 100%; /* 对于1:1的比例 */ } .responsive-image { position: absolute; top: 0; left: 0; bottom: 0; right: 0; object-fit: cover; } ``` 对于不同的宽高比，比如 2:1 的横版图，应相应地改变 `padding-top` 值至 50%[^2]。 #### 方法三：检查并修正可能存在的CSS冲突 有时全局样式或其他组件中的某些规则可能会覆盖本地定义的样式声明。建议通过开发者工具仔细排查是否有意外的优先级问题存在，并适当提高目标样式的权重以确保应用效果。 #### 方法四：确认资源路径无误以及网络请求状态良好 最后还需验证所引用的图片 URL 是否正确可用，同时留意控制台是否存在关于该资源加载失败的日志提示信息。另外需要注意的是，在开发环境下运行的应用程序与生产环境之间可能存在差异，因此务必进行全面测试。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值