1. 程式人生 > >vue動態載入圖片

vue動態載入圖片

寫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]
}
},

圖片並沒有出來,效果是


所以這是不對的,那麼怎麼解決這個問題呢:


醬汁