vue動態載入圖片
阿新 • • 發佈:2019-01-27
寫vue輪播,需要載入圖片,直接把圖片寫進勒data,發現加載出來是字串,故而查詢資料,解決此問題
把圖片放在static中,可以正常載入,如果圖片再assets中就只能引入,至於為什麼,,,,我有空再去查吧
html:
<swiper :options="swiperOption" ref="mySwiper">
<!--這部分放你要渲染的那些內容-->
<swiper-slide v-for="item in items">
<img:src="{{item.src}}" class="index_img"/>
</swiper-slide>
<div class="swiper-pagination" slot="pagination">
<img src="../assets/logo.png" />
</div>
</swiper>
js:
data(){
return{
items:[{src:"../assets/logo.png"},{src:"../assets/logo.png" }],
swiperOption:{
pagination:'.swiper-pagination',
slidesPerView:'auto',
centeredSlides:true,
paginationClickable:true,
onSlideChangeEnd:swiper=>{
//這個位置放swiper的回撥方法
this.page = swiper.realIndex+1;
this.index = swiper.realIndex;
},
},
swiperSlides:[1,2,3,4,5]
}
},
圖片並沒有出來,效果是
所以這是不對的,那麼怎麼解決這個問題呢:
醬汁