一、使用vue-directive-image-previewer

文件：https://www.npmjs.com/package/vue-directive-image-previewer

1、安裝命令如下：

npm install vue-directive-image-previewer -D

2、引入main.js

3、在頁面中使用

<img v-image-preview src =“url” />

經過以上操作就可以了，但是目前僅支援放大圖片，比較可惜。

4、解除安裝vue-directive-image-previewer

cnpm uninstall vue-directive-image-previewer

二、使用viewerjs

文件：https://github.com/faimaklg/vue-viewerjs

1、安裝命令：

npm i vue-viewerjs --save

2、全域性引入

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、頁面中使用

<vue-viewer v-model=""></vue-viewer>