原因:vue项目中,在export中的data中的路径只会被当做普通的字符串,因此无法获取图片。
解决措施:在数组里面写成require( ' 图片地址 ' )
完整代码:
<template>
<!-- 轮播图 -->
<div class="box-left">
<el-carousel height="290px">
<el-carousel-item v-for="item in itemImg" :key="item">
<img :src="item" alt="" style="width: 100%;height: 100%;">
</el-carousel-item>
</el-carousel>
</div>
</template>
export default {
data() {
return {
itemImg: [
require('@/assets/images/lunbo/lunbo1.jpg'),
require('@/assets/images/lunbo/lunbo2.jpg'),
require('@/assets/images/lunbo/lunbo3.jpg'),
require('@/assets/images/lunbo/lunbo4.jpg')
],
interval: 3000
}
}
}
</script>
错误代码:
<script>
export default {
data() {
return {
itemImg: [
'@/assets/images/lunbo/lunbo1.jpg',
'@/assets/images/lunbo/lunbo2.jpg',
'@/assets/images/lunbo/lunbo3.jpg',
'@/assets/images/lunbo/lunbo4.jpg'
],
interval: 3000
}
}
}
</script>