當前位置:首頁 » 圖片知識 » 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;

      })

    }