如何使用v-for遍历图片的src路径？

最新推荐文章于 2022-09-04 12:28:13 发布
最新推荐文章于 2022-09-04 12:28:13 发布
阅读量1.2k 收藏 2
点赞数 1
分类专栏： 前端 vue.js 文章标签： vue.js javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mgf_Yzy/article/details/107893827
版权

今天用Vue的语法糖遍  {{}}  历数据里面的图片路径，死活都在页面中显示不出来：

还给我报这种语法错误：

然后各种查文档，上百度，终于找到了解决办法：

可以使用v-bind解决，然后再把图片地址引入进来，就可以在页面中正常显示了

第一次写文档，格式不堪入目，希望有同样问题的小伙伴凑活着看吧

半岛@少年
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决vue v-for src 图片路径问题 404
01-21
我的代码结构如下所示不能执行，会出现报错 <RadioGroup v-model=animal> <Radio v-for='a in radio_arr' label={{a}}></Radio> </RadioGroup> export default { data(){ return{ radio_arr:['循环1','循环2','循环3'], animal:'循环2' } } } 报错信息： 修改代码如下： 修改内容为 label={{a}} 修改为 ：label=’a’ <RadioGroup v-model=animal
解决vue的 v-for 循环中图片加载路径问题
10-18
例如，如果图片存储在`src/img`目录下，但Vue CLI打包后，图片路径会改变，需要使用相对路径或者绝对路径来确保在生产环境中也能找到图片。 2. **懒加载**：在大量图片加载时，考虑使用懒加载策略，以提高页面加载...
vue v-for src 图片路径问题 404
abcde158308的博客
04-20 6269
我的代码结构如下所示不能执行，会出现报错&lt;RadioGroup v-model="animal"&gt; &lt;Radio v-for='a in radio_arr' label={{a}}&gt;&lt;/Radio&gt; &lt;/RadioGroup&gt; export default { data(){ return{ radio...
Vue v-for :src 循环显示图片
科技向善
08-30 714
<div v-for="(item, index) in codeList"> <img :src="'http://站点01/' + item.subCode + '.gif'" alt=''> <img :src="'http://站点02/' + item.subCode + '.gif'" alt=''> <div> item.subCode不应该写成{{item.subCode}}或者{item.subCode} ...
遍历出的图片路径绑定到图片src...
m0_59638694的博客
08-17 178
vue中v-for循环获取图片地址，渲染图片失败，解决方案
qq_41908953的博客
07-18 1605
给图片地址连接前面加上require()，如下图： <divclass="swiper-slide"v-for="(item,i)inimgs":key="i"> <img style="width:100%;height:100%" :src="item.mainpic" :alt="i" /&gt...
vue3本地src图片循环渲染不显示？
はんみん的博客
09-04 1676
有可能并不是自己写错了路径，而是对渲染的理解还没弄明白我现在使用的是，当然这跟vue2，vue3没有直接的关系，只不过在vue3里我更喜欢像小程序一样直接写，不需要导入数组里，再用 require引入，显得，难用至极。
Vue中使用v-for遍历本地图片地址不正确问题解决
JackieDYH的博客
11-02 912
编译出来后，图片地址不正确 错误代码片段 <div class="hsimg"> <img v-for="(item, index) in hsImg" :key="index" :src="item" alt="图" /> </div> data() { return { hsImg: [ "../assets/images/hsimg01.png", "../assets/images/hsimg02.png", "../asset
Vue用v-for给循环标签自身属性添加属性值的方法
10-17
总结来说，Vue.js中使用`v-for`给循环标签添加属性值时，需要理解如何正确地动态绑定属性（使用`:`或`v-bind`），以及在处理图片路径时如何确保Webpack能识别和处理这些路径。通过`require()`、`import`或使用`...
vue的for循环使用方法
10-17
`v-for`指令的基本语法是`v-for="item in items"`，其中`items`是需要遍历的数据源（数组或对象），`item`是当前遍历到的元素的临时变量名。 2. **数据绑定**： 在`v-for`循环内部，我们可以使用`item`来访问当前...
Vue 中对图片地址进行拼接的方法
10-18
接下来，在Vue的模板中，我们可以使用`v-for`指令来循环显示每个歌手的信息，同时使用`:src`绑定处理后的图片URL，确保图片能够正确显示： ```html <li v-for="item in singers" :key="item.id" class=...
vue v-for 遍历图片的时候，正常写法src里的路径读不出来
热门推荐
qq_36940740的博客
08-17 1万+
v-for 遍历数据 例如要遍历class="commodity_right_content_goods“的div那么就把v-for加在上面。 item in goodsImg ：item为循环的指针，可以一条一条把数组中的数据遍历出来，goodsImg ：为数据数组。 后面还需要再跟上：key ="item.id" 就是你如果只是简单的渲染数据，不对此Dom做增删的操作，那确实加不加都可...
vue中使用v-for渲染本地图片地址
m0_59325389的博客
06-25 829
vue中使用v-for渲染本地图片地址
vue中通过v-for获取img src的问题
Carol的小星球
07-22 793
一开始我写法错误，想当然的认为应该是这样写： { id:'1', src:'../assets/123.jpg') } 但这样写我发现图片死活加载不出来，但是在网页调试中又看到路径是正确的，很疑惑。 然后我就上网查原因，发现是src写法不正确，应该是下面这样写： { id:'1', src:require("../assets/123.jpg") } ...
Vue循环拼接数据 地址+图片路径展示
maoxiaohei_的博客
09-06 746
最近脑子不好使，还是记录一下吧, 代码背景，拼接图片路径展示 <view class="image-content" v-for="(item,index) in station_image" > <image :src="item"></image> </view> export default { data() { return { station_image: [] } }, onLoad(option) { .
v-for循环输出图片及信息展示
糖长老莫小贝的博客
07-20 8431
有时我们写页面时可能会遇到要求图片展示的，类似下图这种 如果是用vue写前端的话那就很方便了，vue中的v-for指令（列表渲染） 这里先附上v-for官方文档 以下面这个小demo为例： HTML代码： <template> <div id="app"> <div class="card" v-for="message in messages" :...
使用v-for循环展示多张图片，并且标记选中的图片
从入门到放弃的博客
06-02 1万+
因为项目需求，需要使用v-for展示多张图片，并且供用户选择其中一张，当用户选中一张图片的时候需要改变该图片的样式，来反映用户的选择。由于刚学vue，踩了好多坑，因此作以下记录，以时刻提醒自己： 1.一开始我打算将图片嵌入button中，但是这样存在的问题，由于是用v-for循环列出的一系列button，每一个button的id或者class名字都是一样的，就算能够知道用户点击图片的in...
vue中v-for图片src路径错误
IT菜鸟
06-19 4295
一、问题概述 <img :src="data.src" class="nav-img"> 1. html结构如下： <ul class="nav-list"> <li v-for="data in navlist" :key="data.index"> <div class="item"> <!--{{...
el-image遍历加载图片
最新发布
09-13
总结一下，使用el-image组件进行遍历加载图片的步骤是：准备图片数据数组，使用v-for指令遍历数组，在组件内部使用el-image组件加载每个图片数据，设置图片的基本属性。 ### 回答3： el-image是Element UI中的一种...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值