当前位置:首页 » 图片知识 » vue如何让图片一张张播出
扩展阅读
女生和渣男搞笑图片 2023-08-31 22:07:09
嘻嘻长什么样图片 2023-08-31 22:06:10

vue如何让图片一张张播出

发布时间: 2023-08-12 17:47:17

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;

      })

    }