1. 先安裝外掛npm install vue-photo-preview --save
2. 在main.js內引入並註冊呼叫

   import preview from 'vue-photo-preview'
   import 'vue-photo-preview/dist/skin.css'
   Vue.use(preview)

<img v-for="src in imgs" :src="src.url" :key="src.title" :preview="src.preview" :preview-text="src.title">

②圖片預覽(縮放 檢視大圖[可拖拽])

1. 先安裝npm install v-viewer --save
2. 在main.js中引入並註冊呼叫

   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 :images="image">
     <h1>preview圖片預覽外掛</h1>
     <img v-for="src in imgs" :src="圖片" :key="圖片的唯一標識">
   </viewer>