vue中圖片預覽(v-viewer庫使用)

效果圖:   注釋: 可拖拽,可放大縮小旋轉,全屏,功能齊全,底部有操作按鈕

 屬性:

 

npm install v-viewer --save    //安裝

//在main.js中引入
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

//Vue.use(Viewer) 默認配置寫法
Vue.use(Viewer, {
    defaultOptions: {
        zIndex: 9999,

　　　　　toolbar: true

} })

代碼:

<viewer :images="previewImages">
     <img v-for="src in previewImages" :src="src" :key="src" width="200"> 
</viewer>

 

data () {
        return {
            previewImages : []
        }
},
 created() {
   //圖片是從后台  (網絡圖片)
   this.getData()
 },
 methods: {
    getData() {
        var _this = this
          _this.$http.get('/admin/attach/product')
             .then(function (response) {
                  _this.previewImages= response.data 
　　　　　　　　.catch(function (err) { 
　　　　　　　　　　console.log(err)
　　　　　　　　});
 　　　　} 
　　　}

 參考鏈接:https://www.jianshu.com/p/2c63a556b5cb

　　　　　　https://www.jianshu.com/p/84042c7b1b5b