vue系列【element ui 处理图片流及实现多张图片轮播】

<template>
  <div v-viewer="viewOps">
    <el-carousel :indicator="false" :autoplay="false">
        <el-carousel-item v-for="(img,index) in images" :key="index">
            <img :src="img.base64" alt="" :id="'image_' + index" class="imageStyle" :key="index" @load="imageLayer('image_' + index)">
        </el-carousel-item>
  </el-carousel>
  </div>
</template>

<script>
import {getImageApi} from "@/api/xxxx.js"
export default {
    data() {
        return {
           bzfimg:require('@/static/notimage.png'),
           images: [],
           viewOps:{
                zIndex:9999
           }
        };
    },
    mounted(){
        this.getImageApi()
    },
    methods:{
        getImage:function(){
            const t = new Date().getTime()
            let params =xxxx
            getImageApi(params,t).then(res=>{
                if(res && res.code === 200){
                   this.images = []
                    //    var imageUrl = res.data.images
                   var imageUrl = [
                       {
                           base64:"pdfdffnvmfmj+djjfjdjnfkdmm....",
                           mimetype:'pdf'
                       },
                       {
                           base64:"pdfdffnvmfmj+djjfjdjnfkdmm....",
                           mimetype:'pdf'
                       },
                       {
                           base64:"pdfdffnvmfmj+djjfjdjnfkdmm....",
                           mimetype:'pdf'
                       },
                    ]
                    if(imageUrl.length != 0){
                        imageUrl.forEach(element=>{
                            element.base64 = 'data:image/' + element.mimetype + ';base64,' + element.base64
                            this.images.push(element)
                        })
                    }else{
                        this.images.push(
                            {
                                base64:this.bzfimg,
                                mimetype:'png'
                            }
                        )
                    }
                }
            })
        }
    }

}
</script>

<style>

</style>