Vue中使用:src绑定图片 图片加载不出来 不能显示

最新推荐文章于 2024-08-04 21:17:54 发布
最新推荐文章于 2024-08-04 21:17:54 发布
阅读量4.5k 收藏 6
点赞数 5
分类专栏： Vue中bug
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45912825/article/details/118921706
版权

乱码 vue js html node.js

当Vue在前端传入一个图片时会自动添加一个无序乱码，如下图所示
在这里插入图片描述

在项目中的图片名称为tree.jpg,但是浏览器自动添加上了6990f624的乱码。

所以直接在:src中传入图片路径是不行的
我们需要得到图片路径中的乱码才能获得正确路径

方法很简单，只需用require方法引入图片传给 :src,就可以得到编码后的图片路径。
如下：

这是错误写法：
:src="@/assets/img/tree.jpg"

这是正确写法：
:src="require(''+'@/assets/img/tree.jpg'+'')"
Mboss76
关注
  • 5
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue :src 不生效，解决：给＜img＞图片标签绑定src属性，图片无法加载
weixin_44817017的博客
03-08 3655
问题： 使用:src绑定本地图片地址不生效 本地图片的位置 出现问题的代码： <img id="avatar" :src="imageLink"> data() { return { imageLink: '@/assets/img/avator.jpg' } } 页面上图片无法加载。 方法一：使用require引入图片 修改后的代码： <img id="avatar" :src="imageLink"> data() { return { im
【Vue】img使用 :src 动态绑定图片地址，但是加载图片不成功
weixin_57509111的博客
05-20 1087
img标签直接动态绑定图片的相对路径的时候，图片不能正常显示。引入才能成功，就可以动态使用了。设置绝对路径或者相对路径是改为用。动态地址，路径被加载器解析为。
(vue):src图片不显示解决办法
nyf_unknow的博客
05-26 4851
2.把图片放在cdn上，把网络地址存在imgUrl里，然后直接去展示。3.图片放在assets文件夹，然后在data里面require进图片。1.把图片放在src同级的static文件夹下。
【Vue】img使用 :src 动态绑定项目图片，加载失败
最新发布
xiaoxiqo的博客
08-04 214
参考文献：vue 项目效果展示不出：
解决Vue中动态src图片不显示
weixin_61945023的博客
07-21 4788
解决：Vue项目中动态绑定src图片不显示问题，需要加require（）
HTML Img标签 src为网络地址无法显示图片问题解决
m0_72929120的博客
06-30 1884
在前端可以通过meta来设置referrer policy(来源策略)，referrer设置成no-referrer，发送请求不会带上referrer信息，对方服务器也就无法拦截了。上面出现403就是因为，请求的是别人服务器上的资源，但把自己的referrer信息带过去了，被对方服务器拦截返回了403。http请求头中有一个referrer字段，用来表示发起http请求的源地址信息。服务器端在拿到这个referrer值后判断请求是否来自本站。若不是则返回403，从而实现图片的防盗链。
Vue.js 图片不显示 | 图片资引用 | img src 路径出错
热门推荐
看不到的结果
03-29 3万+
Vue.js 图片不显示 | 图片资引用 | img src 路径出错
VUE 图片:src方式引用加载不出来
weixin_52063946的博客
09-07 2153
在 vue 项目中，用src的方式引入图片，刚开始是采用这种方法： 但是图片加载不出来 错误原因：图片被浏览器识别成了 text，而不是 jpg格式，所以显示不出来 解决方法：用 require() 方法，直接传入图片编码 { id: "46", img: require("../../public/imgs/slider/slide-3.jpg"), }, 问题解决 ...
vue src动态加载请求获取图片的方法
10-17
同样地，将获取到的图片数据绑定到`formData.avatar`，然后在模板中使用`<img>`标签展示： ```html <img :src="formData.avatar" alt=""> ``` 总结： 动态加载本地图片和请求获取的图片在Vue中都是通过`...
Vue中img的src是动态渲染时不显示的解决
10-15
根据文档的描述，当遇到在Vue中动态绑定img标签的src属性值时图片不显示的问题，我们可以通过以下知识点来解决。 首先，Vue中的数据绑定允许我们将变量值绑定到元素属性上。通常，我们会使用Mustache语法（即双大...
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
08-28
在Vue.js框架中，动态绑定图片是常见的需求，特别是在数据驱动的应用中，图片路径可能根据用户操作或后台数据的变化而变化。本篇文章将详细介绍如何在Vue中动态绑定图片以及通过`data`对象返回图片路径的方法。 ...
Vue img中src地址无法访问时处理
Caroline_LuoLuo的博客
12-29 2798
最近做的项目中经常会有从后台获取图片地址，动态绑定到src上，但是当网络不好，或者后台给的地址无法访问时页面就没办法渲染，用户体验很不好 一开始尝试了直接利用img原生属性onerror来设置默认图片 &lt;img class="room_img" onerror="javascript:this.src='@/assets/image/activity/defaultImg.jpg'" ...
【Vue】】img使用 :src 动态绑定图片地址，但是加载图片不成功
y_coder的博客
07-31 4873
img标签直接动态绑定图片的相对路径的时候，图片不能正常显示。动态地址，路径被加载器解析为字符串，所以图片找不到。设置绝对路径或者相对路径是改为用。引入才能成功，就可以动态使用了。
Vue中定义src在img标签使用时加载不出来
weixin_55800388的博客
06-20 794
-vue3的语法，vue2类似--> < template > < img :src = " " /> < script setup > import {const src = ref('图片路径')；--vue3的语法，vue2类似--> < template > < img :src = " " /> < script setup > import {const src = ref('图片路径')；
SRC 属性无法显示图片之原因
diamonddream的专栏
07-05 2668
今天用Illustrator 做完图在PS里修改后插入SRC属性遇到这个问题，用方法3解决了问题。1. 网页中图片连接与图片实际路径不一样。尤其是对初学者来说，一个常见的错误就是在本地制作网页时，插入图片， 却是以本地路径来表示的，比如 ，这样表达放到网上就 是错误的。正确的表示方法应该使用图片的绝对路径或相对路径。请参看上面对两种路径的解释。2. 很多空间对大小写敏感
vue :src本地图片不读取
weixin_34245082的博客
03-06 3978
修改方式： 　　使用require（‘文件名’） 转载于:https://www.cnblogs.com/hzx-5/p/10482391.html
（已解决）VUE中网络资源图片加载失败
cnhyls的博客
05-06 334
在vue3中，使用v-bind绑定图片的src属性，浏览器正常能正常渲染出来 ，但是图片加载不出来。在index.html文件中加入如下代码。
vue :src图片不显示解决办法
SugarXiXixi的博客
11-17 5562
<el-carousel-item v-for="(item,index) in houseObj.imgList" :key="index"> <img :src="require('../../assets/image/'+item)" alt="" :size="400"> </el-carousel-item> 参考博客
Vue中动态设置img的src不生效的原因
weixin_65356798的博客
08-03 870
动态设置img的src不生效的问题
vue使用v-for图片不显示
07-14
如果在Vue中使用v-for来循环显示图片，但图片不显示，可能有以下几个原因： 1. 图片路径错误：请确保图片的路径是正确的，可以使用绝对路径或相对路径。如果图片位于public目录下，可以使用绝对路径，如`/img/...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值