Vue中循环渲染img标签中的src

candyOnly_0918

于 2023-03-21 17:26:43 发布

阅读量543

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/dongakng/article/details/129693284

该文章展示了如何在Vue.js应用中使用template和v-for指令动态渲染一组avatar图片。图片源通过data属性imgs提供，每张图片的src基于不同的avatar_前缀进行循环展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

template部分：
<div class="avatar_list">
  <img v-for="(item,index) in imgs" 
       :key="index"
       class="avatar" 
       :src="require(`../assets/nenglitupu/${item.src}.png`)" alt="">
</div>

data部分：
imgs: [
        {src:'avatar_a'},
        {src:'avatar_b'},
        {src:'avatar_c'},
        {src:'avatar_a'},
        {src:'avatar_b'},
        {src:'avatar_c'},
        {src:'avatar_a'},
        {src:'avatar_b'}
      ],