element-ui中的轮播组件(Carousel 走马灯),示例中使用的是普通div,当换成图片时显示异常(获取不到图片)。
问题原因:
当在组件中循环获取图片时,就不能直接用相对路径来获取了,需要使用require从目标处导入
代码如下:
<template>
<div class="wrap">
<div class="img-box1">
<el-carousel height="300px">
<el-carousel-item v-for="item in imgList" :key="item.id">
<img :src="item.url" width="100%" height="300" alt="">
</el-carousel-item>
</el-carousel>
</div>
</div>
</template>
<script>
export default {
data() {
return {
imgList: [
//图片路径不能写为这种形式
// {
// id: '1',
// url: '../assets/test1.jpg'
// },
//需要使用require获取
{
id: '1',
url: require('../assets/test1.jpg')
},
{
id: '2',
url: require('../assets/test3.jpg')
},
{
id: '3',
url: require('../assets/test4.jpg')
}
]
}
}
}
</script>
<style scoped>
.img-box1{
width: 500px;
}
</style>