Vue的实现图片懒加载和预览图片

----------------main.js里面：
// 图片查看
import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'
Vue.use(Viewer)

// 图片懒加载
import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad, {
  error: require('@/assets/img/IMGerror.png'),
  loading: require('@/assets/img/loading.gif')
})


----------------package.json
  "dependencies": {
    "v-viewer": "^1.5.1",
    "vue-lazyload": "^1.3.3",
  },
    
----------------使用
    1.图片查看
    <viewer class="viewerCla" ref="viewer" :images="lookPics">
      <img :src="lookPics[0]" alt="" />
    </viewer>
    
        // 点击查看大图
    lookImg(url) {
      let dom = this.$refs.viewer.$viewer;
      this.lookPics = [url];
      dom.show();
    },
     2.懒加载指令替换图片的src属性--v-lazy