VUE实现v-for循环遍历图片方法

最新推荐文章于 2024-03-13 11:16:51 发布
最新推荐文章于 2024-03-13 11:16:51 发布
阅读量9.1k 收藏 18
点赞数 4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45181637/article/details/118188411
版权

写项目时，遇到后台无法提供背景图片，需要自己在本地循环遍历到页面上，并和后台数据一起展示的需求，解决方法如下:

resourceList是后台传过来的数组对象，我们需要展示它的name，同时，在本地把图片按以下方式命名：

使用:src动态获取图片属性，记住必须加require！！！ 使用模板字符串方法，将图片名和数字遍历出来，得以解决。附上一张效果图

达顿瓦珠
关注
  • 4
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
解决vue的 v-for 循环中图片加载路径问题
10-18
今天小编就为大家分享一篇解决vue的 v-for 循环中图片加载路径问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue3实现图片切换---v-for指令渲染数据到页面
猪儿君的博客
07-05 1423
Vue3实现图片切换，两种方式实现。动态渲染或将页面写死
vue v-for 循环图片 三种方法
半盏茶. ོ
11-25 8907
一、正常的引入，但是得在static下创建image文件夹 <view v-for="item in list"> <text>{{item.name}}</text> <view class=""></view> text>{{item.age}}</text> <view class=""></view> <image :src="item.img" mode=""></
v-for 循环遍历图片路径加载图片
虎康的博客
03-13 849
这篇文章的话，项目部署后，会出现图片资源请求成功但未加载到页面上的问题，因此需要使用 import 导入。要循环遍历加载图片，就需要对图片进行处理，建议使用 import 进行导入，如果使用。
vue中加载本地静态资源 v-for遍历本地图片
Andrew_SJ的博客
08-12 3321
测试组件时，需要遍历一下本地图片。发现直接给img绑定src属性为图片的url，图片无法显示。 <template> <div v-for="item,index in pics" :key="index"> <img :src="item.img" alt=""> </div> </template> <script> export default { name: 'test', data() {
【Vue.js】使用v-for指令遍历图片
Handsome_gir的博客
04-07 3958
vue.js通过v-for指令遍历图片数组，首先给一个数组，数组内放入图片的路径，使用v-for指令遍历数组，通过v-bind指令绑定src属性，v-bind的简写是：属性名。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>v-for指令遍历图片</...
v-for图片处理
fuyouliangce的博客
03-28 332
名次：</span> {{ item.title }}</div><div><span class="bloder">得分：</span> {{ item.score }}</div><div><span class="bloder">名次：</span> {{ item.title }}</div><div><span class="bloder">得分：
Vue中v-for动态遍历本地图片
earthOLtainanwan的博客
08-21 8218
Vue中v-for动态遍历本地图片方法： data中使用如下键值对的方式存储图片路径： 使用v-for进行遍历：
使用Vue中 v-for循环列表控制按钮隐藏显示功能
12-29
v-for可以把数据中的一个数组对应为一组元素 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。 – 实现效果如图 需求描述： 第一个显示蓝色按钮，代表数据...
基于vue v-for 多层循环嵌套获取行数的方法
10-17
今天小编就为大家分享一篇基于vue v-for 多层循环嵌套获取行数的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue v-for 遍历循环时key值报错的问题
10-18
今天小编就为大家分享一篇解决vue v-for 遍历循环时key值报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue2.0 循环遍历加载不同图片的方法
08-27
下面小编就为大家分享一篇vue2.0 循环遍历加载不同图片的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
浅析vue中常见循环遍历指令的使用 v-for
12-29
vue中循环遍历使用的指令是v-for 1.v-for遍历数组 (1)value in arr 遍历数组中的元素 (2)(value,index) in arr 遍历数组中的元素和数组下标 运行代码： <body> <li v-for=value>{{value}}</li><br>　 ...
Vue 中使用 v-for 展示不同的图片
cdd9527的博客
01-13 1241
Vue 中展示在 v-for 展示不同的图片
Vue关于v-for图片
ws8d1113的博客
04-06 583
小白学习vue.js,在v-for的时候,显示普通数组没问题,但是想试着循环图片,出了问题 我一直认为这样可以循环图片,结果.. 这样才可以 疫情在家学习,小白问题还有很多,欢迎其他小白一起研究,最后也希望,同志们身体都健健康康的,毕竟还有996等着你们呢~~ ...
vue v-for遍历本地图片 require用法
m0_65394648的博客
07-03 816
比如这里的../../assets/就是不变的，后面的地址会动态变动，因此提出../../assets/放在require里面。之前是:src=“item.img” 之后是:src=“require(’../../assets/’+item.img)”刚开始我试着用../../方法调用图片 直接用的话显示是没问题的 但是配合v-for渲染使用的话会造成图片显示错误。由此我们知道之前的本地需要遍历的数据里面少的../../assets/这个片段是加在了这里。将../../的路径删除。
使用v-for 循环生成图片时，静态资源图片加载失败
dbagugumf018717008的博客
03-06 323
当我使用v-for加载图片资源后，发现静态资源显示不成功 <template lang="html"> <Panel title="有车有钱" :class="$style.panel"> <section :class="$style.ycyqImg"> <div :class="$style.imgIt...
使用v-for遍历对象
热门推荐
weixin_44547786的博客
09-18 1万+
开发工具与关键技术：Intellij IDEA、Vue.js 作者：邓婵 撰写时间：2020年 09月 17日 当遍历对象属性或者数组进行迭代循环展示时，就会用到列表渲染指令 v-for。它的表达式需要结合in来使用，类似item in items的形。下面我们来看看使用v-for列表渲染指令来遍历对象属性。 在上面的表达式中product是当前的一条数据，其中key代表键，val代表的是值，i代表当前索引值，列表渲染用in来作为分隔符。 请求页面的效果如下： 如果数据是json格式的数组，其实它的写
vue2.x 循环img src遍历加载不同图片的方法
itwangyang520的博客
09-02 5880
vue2.x 循环img src遍历加载不同图片的方法 第一种，vue.js直接引入网页的模式 html <main class="tabThird"> <section class="showFelx"> <div v-for="(item,index) in items" :key="index" class="ite...
div中用v-for循环遍历数组，后用v-html熏染
最新发布
04-18
在Vue.js中，可以使用`v-for`指令来循环遍历数组，并使用`v-html`指令来渲染HTML内容。下面是一个示例： ```html <div id="app"> <ul> <li v-for="item in items" :key="item.id" v-html="item.content"></li> </ul> </div> ``` 在上面的代码中，我们使用`v-for`指令来遍历名为`items`的数组，并将每个数组元素的内容渲染到`li`元素中。`:key`属性用于提供唯一的标识符，以便Vue能够正确地跟踪每个元素的变化。 注意：使用`v-html`指令时要小心，因为它会将数据作为HTML解析并渲染到页面上。请确保你信任并且验证了要渲染的内容，以防止XSS攻击。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值