使用viewer插件显示缩略图展示原图1.安装viewer插件 2.main.js引入配置 3.具体使用：.......

1.安装viewer插件

yarn add v-viewer  ||  npm install v-viewer

2.main.js引入配置

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"
    }
});

3.具体使用：

//举例
<viewer
:images="[ { url: 资源路径, title: '图片', } ,]"
//这里一定要是一个数组，否则会报错
>
 <img
 height="100"
 :src="完整的资源路径 "
  alt="图片"/>
</viewer>