图片懒加载

vue-lazyload

npm i vue-lazyload@1.3.3 -S

main.js

import VueLazyload from "vue-lazyload";
const loadimage = require("./assets/img/loading.svg");
const errorimage = require("./assets/img/error-pic.svg");
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: errorimage,
  loading: loadimage,
  attempt: 1,
});

src换成v-lazy

vue-lazyload 和 v-viewer 冲突

在初始页面的时候，由于v-lazy的图片懒加载的影响，在对图片进行预览时监听的时候img的dom还没加载，导致监听失败，从而无法预览。

inited(viewer) {
  //viewer.element是img外层盒子的node节点，可以通过childNodes来获取img节点，并且把并且把获取到的nodeList变为数组，否则报错。
  //这里最好是去过滤一下是不是img节点，如果添加进去非img节点预览时也回报错。
  //如果你的页面层级比较深的话就得递归去遍历了
  viewer.images = [...viewer.element.childNodes].filter(item=>item.nodeName == 'IMG')
  
  //length也必须加上，  光加images是不行的。
  viewer.length = viewer.images.length
},

参考