v-viewer

 import Vue from ‘Vue’

import Viewer from ‘v-viewer’

import ‘viewerjs/dist/viewer.css’

Vue.use(Viewer)

Viewer.setDefaults({

Options: {

'inline': true, // 是否启用inline模式

'button': true, // 是否显示右上角关闭按钮

'navbar': true, // 是否显示缩略图底部导航栏

'title': true, // 是否显示当前图片标题，默认显示alt属性内容和尺寸

'toolbar': true, // 是否显示工具栏

'tooltip': true, // 放大或缩小图片时，是否显示缩放百分比，默认true

'fullscreen': true, // 播放时是否全屏，默认true

'loading': true, // 加载图片时是否显示loading图标，默认true

'loop': true, // 是否可以循环查看图片，默认true

'movable': true, // 是否可以拖得图片，默认true

'zoomable': true, // 是否可以缩放图片，默认true

'rotatable': true, // 是否可以旋转图片，默认true

'scalable': true, // 是否可以翻转图片，默认true

'toggleOnDblclick': true, // 放大或缩小图片时，是否可以双击还原，默认true

'transition': true, // 使用 CSS3 过度，默认true

'keyboard': true, // 是否支持键盘，默认true

'zoomRatio': 0.1, // 鼠标滚动时的缩放比例，默认0.1

'minZoomRatio': 0.01, // 最小缩放比例，默认0.01

'maxZoomRatio': 100, // 最大缩放比例，默认100

'url': 'data-source' // 设置大图片的 url

}

})

alt l里面写图片名称

https://codepen.io/mirari/pen/PowNyEY   在线演示

html

<link href="//unpkg.com/viewerjs/dist/viewer.css" rel="stylesheet">
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/viewerjs/dist/viewer.js"></script>
<script src="//unpkg.com/v-viewer/dist/v-viewer.js"></script>
<div id="app">
  <viewer :images="images" class="images clearfix">
    <template slot-scope="scope">
        <img v-for="a in scope.images"
             :src="a.src" :key="a.src"  class="image" :alt="a.alt"> 
      </template>
  </viewer>
</div>

css,js

.image {
    height: 200px;
    cursor: pointer;
    margin: 5px;
    display: inline-block;
  }

.viewer-title{
    font-size:30px!important;
}

Vue.use(VueViewer.default)
console.log(VueViewer.default)
var Main = {
  methods: {
    toggle() {

    }
  },
  data() {
    return {
			images: [
      {src: 'https://picsum.photos/200/200', alt:   'aa.jpg   p1-3' , age: 15},
      {src: 'https://picsum.photos/300/200', alt:   'bb.jpg   p2-3' , age: 16},
      {src: 'https://picsum.photos/250/200', alt:  'cc.jpg    p3-3' , age: 17},
    ]
    }
  }
}
var App = Vue.extend(Main)
new App().$mount('#app')