vue v-for 遍历图片src的写法（element走马灯）

遍历本地图片路径数组的时候需要使用require进行引入，下面两种方法均可：

方法一：

<template>
    <div class="eleTest">
      <el-carousel height="300px" >
        <el-carousel-item v-for="item in dataList" :key="item.id" >
          <h3 class="small"><img :src="item.src" alt="" style="width:500px;height:300px" /></h3>
        </el-carousel-item>
      </el-carousel>
    </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        { id:1, src: require("@/assets/images/scenery1.jpg") },
        { id:2, src: require("@/assets/images/scenery2.jpg") },
        { id:3, src: require("@/assets/images/scenery3.jpg") },
        { id:4, src: require("@/assets/images/scenery4.jpg") },
        { id:5, src: require("@/assets/images/scenery5.jpg") },
        { id:6, src: require("@/assets/images/scenery6.jpg") },
      ],
    };
  },
};
</script>

方法二：

<template>
    <div class="eleTest">
      <el-carousel height="300px" >
        <el-carousel-item v-for="item in dataList" :key="item.id" >
          <h3 class="small"><img :src="require('@/assets/images/scenery'+item.id+'.jpg')" alt="" style="width:500px;height:300px" /></h3>
        </el-carousel-item>
      </el-carousel>
    </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        { id:1 },
        { id:2 },
        { id:3 },
        { id:4 },
        { id:5 },
        { id:6 },
      ],
    };
  },
};
</script>