vue swiper本地图片显示问题
要点:非/static路径下,本地图片路径需要添加require(’~imgurl’)
data() {
return {
//图片路径
swiperImg: [
{srcs: require('@/assets/img/swiper/1.jpg')},
{srcs: require('@/assets/img/swiper/2.jpg')},
{srcs: require('@/assets/img/swiper/3.jpg')},
]
}
},
父组件图片路径渲染:
<Xswiper>
<template v-slot:swiper-img>
<div class="swiper-slide" v-for="img in swiperImg" :key="img">
<img :src="img.srcs" alt="">
</div>
</template>
</Xswiper>
父组件导入子组件:
import Xswiper from '@/components/common/Swiper'
export default {
name: "Home",
data: {},
components: {
Xswiper
},
data() {
return {
result: null,
//图片路径
swiperImg: [
{srcs: require('@/assets/img/swiper/1.jpg')},
{srcs: require('@/assets/img/swiper/2.jpg')},
{srcs: require('@/assets/img/swiper/3.jpg')},
]
}
},
}
子组件:
<template>
<div class="swiper-container">
<div class="swiper-wrapper">
<!--具名插槽,存放具体轮播内容-->
<slot name="swiper-img"></slot>
</div>
</div>
</template>
<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.css'
export default {
name: 'Swiper',
mounted() {
var mySwiper = new Swiper('.swiper-container', {
autoplay: 3000,
loop : true
})
},
}
</script>