vue 图片预览

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

代码:

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