1. vue.js怎麼實現圖片輪播就是一個圖片隔一秒換一張,不用別的功能
你開個定時器,一秒換一個img的src不就行了?
隨便寫了個:
<divid="app">
<divclass="pic">
<img:src="now"/>
</div>
</div>
<script>
newVue({
el:"#app",
data:{
pic:["./images/1.jpg","./images/2.jpg","./images/3.jpg","./images/4.jpg","./images/5.jpg"],
i:"0",
now:"./images/1.jpg",
},
mounted:function(){
this.now=this.pic[0];
var_this=this;
setInterval(function(){
_this.i++;
_this.now=_this.pic[_this.i];
if(_this.i>=_this.pic.length-1){
_this.i=0;
}
},1000)
},
methods:{
}
})
</script>
2. 後端實時生成圖片,前端VUE如何獲取並展示
用blob的方式獲取尺毀後端實時生成的圖片,在圖片生成之後再顯示,生成中載入loading
getBlobPic(works){
axios({
method:"get",
url:'/api/competition/my-works-basecert?works_id=' + works.id,
responseType:'blob'
}).then((response)=>{
雹困拆 if(response.status===200){
const {data,headers}=response
const blob=new Blob([data],{ type:headers['content-type'] })
源棗 this.certificateImg=window.URL.createObjectURL(blob)
this.certificateloading=false;
}else{
this.certificateloading=false;
}
}).catch((error)=>{
this.certificateloading=false;
})
}