遍历本地图片路径数组的时候需要使用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>