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;
})
}