vue中循环渲染img标签中的src(亲测有效)

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


先上效果图
在这里插入图片描述

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'}
      ],

项目结构
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_43131046/article/details/113392657