vue项目中动态绑定src不成功解决方法

最新推荐文章于 2024-08-04 21:17:54 发布
最新推荐文章于 2024-08-04 21:17:54 发布
阅读量3.2k 收藏 3
点赞数 1
分类专栏： vue 文章标签： vue 动态绑定src不成功
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/john_xiaoweige/article/details/81511856
版权

v-for动态绑定src时候的数组长这样
这里写图片描述
发现渲染不成功，全部是没有图片显示，百度后才知道，图片的路径不能直接写，要require进来，如下图所示：
这里写图片描述

然后就成功了（我的图片路径在当前目录下，所以路劲是./,大家用的时候要自己修改下图片路径）

john_xiaoweige
关注
专栏目录
Vue项目中动态绑定src路径
weixin_42084225的博客
11-11 1634
问题1 vue项目中图片路径为变量时不能显示，如下 <img :src="imgSrc" alt=""> this.MyimgSrc = ‘../../assets/style/icon/icon.png' 解决方法： this.imgSrc = require('../../assets/style/icon/icon.png') 问题2 把获取到的图片放入数组中不显示 解决方法...
动态绑定src遇到的问题
归零
12-31 4709
在动态绑定src时遇到了一个问题，具体的原因还不知道是什么，以下是百度得到的方法： 这里以vue-cli中的项目为例： 还原事故现场 在vue中正常引入时： 图片可以正常显示 当进行如下修改： 这时，图片显示不出 奇怪的是在控制台中： 这里应该是webpack解析方面的问题，未深入研究 解决方法 通过require引入 而通过src直接写入和require引入，其显示均为： 这里还需要...
vue 双向数据绑定（补充）--数组
haoyanyu_的博客
08-23 743
上回写到，vue里通过new Observer实例，来对数据进行劫持，重写get和set，在set里会触发订阅者的更新，从而实现数据同步更新。 补充一下数组的处理 var Observer = function Observer (value) { this.value = value; this.dep = new Dep(); //1 订阅者容器， 用于存放所有订阅者 ...
【Vue】img使用 :src 动态绑定项目图片，加载失败
最新发布
xiaoxiqo的博客
08-04 240
参考文献：vue 项目效果展示不出：
vue踩坑笔记之src的动态绑定赋值问题
Milan_KunderLa的博客
05-15 2万+
我的需求是这样的，在一个页面点击了路由器的链路，将某个对象传递给下一个页面，这个对象的其中就包含了一个{递减：''，IMG：''}这样的对象数组，我想在跳转的页面将这个IMG显示出来，于是我这样做：在跳转的下一个页面接收这个数组DUI在HTML中进行展示赋值的语句并没有什么错误，但是出现了下面的结果：其中文字内容能够正常显示，说明传递的数据没有错但是由于在div中显示之前，webpack并没有去编...
vue v-for img标签 src路径问题 解决 数组路径
肾齐团队
05-28 1985
<div class="friItem" v-for="(item,index) in fris" v-bind:key="index"> <img :src="fris[index].wxHeadImg" alt="..."> <div>{{item.wxNickName}}</div> </div> 如代码所示： 提示： 直接用item.wxHeadImg 的时候 src标签是不允许的，所有通过角标直接绑定原数组的值来获取路径 2.
Vue实现动态src实现播放音频(audio标签)本地
error044的博客
06-08 3142
技术场景：Vue2,iview需求场景：公司项目要实现一个扫码枪录入条码，并在录入条码后动态播放一段音频。
关于vue v-for循环解决img标签的src动态绑定问题
10-18
综上所述，通过这篇文章，我们可以了解到在Vue项目中使用v-for循环渲染图片列表时，需要注意图片资源的存放位置、正确的路径引用方式，以及Vue中动态绑定src属性的正确语法。这些知识点对于开发一个性能良好且维护性...
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
08-28
本篇文章将详细介绍如何在Vue中动态绑定图片以及通过`data`对象返回图片路径的方法。 首先，让我们理解Vue中的`v-bind`指令。`v-bind`用于动态地绑定一个或多个属性到实例的数据。当数据改变时，Vue会自动更新绑定...
解决vue2.0动态绑定图片src属性值初始化时报错的问题
08-27
本文将讨论 Vue 2.0 中动态绑定图片 src 属性值初始化时出现的错误问题，并提供解决方案。 描述：在 Vue 2.0 中，经常会使用类似这样的语法 `v-bind:src = " imgUrl "`（缩写 `:src = " imgUrl "`）来绑定图片的 ...
Vue中img的src是动态渲染时不显示的解决
10-15
根据文档的描述，当遇到在Vue中动态绑定img标签的src属性值时图片不显示的问题，我们可以通过以下知识点来解决。 首先，Vue中的数据绑定允许我们将变量值绑定到元素属性上。通常，我们会使用Mustache语法（即双大...
Vue项目中动态绑定src路径不成功(已解决)
line
10-08 2万+
问题： 在做Vue项目的时候，由于项目需求，需要动态绑定img的src时，突然发现如果说是直接请求后台接口的图片地址就能显示，但是直接动态绑定img的src的图片的相对路径或者是绝对路径的时候，图片不能显示，控制台也不报错 html代码： &amp;lt;img :src=&quot;MyimgSrc&quot; alt=&quot;&quot;&amp;gt; js代码： this.MyimgSrc = ...
VUE动态绑定audio/video的src不能播放
热门推荐
酷拽舞神
07-16 2万+
前几天写个项目，要求要本地上传音视频至服务器，再回显可播放。心想这简单啊，直接vue双向绑定不就轻松解决，没想到遇到个大坑~ html代码如下： &lt;audio controls&gt; &lt;source :src="audio_url"&gt; 您的浏览器不支持 audio 元素。 &lt;/audio&gt;  js代码如下： this.audio_url = ...
vue中audio动态绑定src不能播放
chi1130的博客
09-05 5673
前言 略去。。。 代码 <audio id="audio" controls> <source :src="audUrl || '../assets/alarm.ogg'" type="audio/ogg" /> </audio> 问题 发现问题 绑定的时候,发现并不管用 let audio = document.querySelector('#audio...
vue v-for循环回来的数据动态绑定id
qq_24612793的博客
07-28 2万+
 代码效果图!!!!! &lt;ul&gt; &lt;li v-for="(site,index) in sites" :key="index" :id="forId(index)"&gt; &lt;span class="channel-li-li-border"&gt; &lt;span class="firstLevel"&gt;
VUE动态绑定audio/video/img的src不能播放或显示
weixin_33884611的博客
09-04 2793
2019独角兽企业重金招聘Python工程师标准>>> ...
Vue.js 2.0 有时双向绑定img src属性失败问题
sunshine的博客
06-27 3827
错误用法：<img src="http:0.0.0.127/{{item.imgname}}" alt="">正确用法：<img src="'http:0.0.0.127/'+item.imgname" alt=""> 绑定属性的时候，前面加: 属性的值可以用表达式，但注意字符串拼接的时候要加引号
vue动态设置audio的src无效
weixin_43254676的博客
06-02 2052
vue中动态绑定audio的src，播放无效，报错如下： <audio id="fixedAudio" ref="audio" :src="fixedSrc" /> 改用引入方式 <tempalte> <audio id="fixedAudio" ref="audio" :src="fixedSrc" /> </template> <script> import wav1 from '../../assets/audio/1.wav' expo
vue中的img动态绑定src
09-13
根据你提供的代码和需求，请参考以下步骤来实现动态绑定src属性： 1. 在Vue实例的data属性中定义一个存储图片地址的数组imgList，其中包含多个对象，每个对象代表一张图片，其中包含imgNo、src、width和height属性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值