一、使用vue-directive-image-previewer
文檔：https://www.npmjs.com/package/vue-directive-image-previewer
1、安裝命令如下：
npm install vue-directive-image-previewer -D
2、引入main.js
import VueDirectiveImagePreviewer from 'vue-directive-image-previewer'
import 'vue-directive-image-previewer/dist/assets/style.css'
Vue.use(VueDirectiveImagePreviewer)
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 install v-viewer --save
2、全局引入
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, // 顯示當前圖片的標題
'toolbar': true, // 顯示工具欄
'tooltip': true, // 顯示縮放百分比
'movable': true, // 圖片是否可移動
'zoomable': true, // 圖片是否可縮放
'rotatable': true, // 圖片是否可旋轉
'scalable': true, // 圖片是否可翻轉
'transition': true, // 使用 CSS3 過度
'fullscreen': true, // 播放時是否全屏
'keyboard': true, // 是否支持鍵盤
'url': 'data-source' // 設置大圖片的 url
}
})
3、頁面中使用
<viewer>
<img :src="record.PreviewFileUrl"
style="width:80px;height:45px;"
alt=""
title="點擊放大" />
</viewer>