使用viewer进行图片预览操作

使用npm下载插件
npm install viewerjs
npm install v-viewer --legacy

在main.js里进行配置
import Vue from 'vue'
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

Vue.use(Viewer)

Viewer.setDefaults({
  Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'tooltip': true, 'movable': true, 'zoomable': true, 'rotatable': true, 'scalable': true, 'transition': true, 'fullscreen': true, 'keyboard': true, 'url': 'data-source' }
})

<template>
   <viewer :images="form">
     <div v-for="(item, index) in form">
        <img :src="item.url/>
     </div>
  </viewer>
</template>

<script>
  export default {
     data(){
       form: [
         {url:'https:xxxxxxxxx'},
         {url:'https:xxxxxxxxx'},
         ...
      ],
    }
  }
</script>