Vue中使用v-viewer 显示缩略图点击打开原图

1、安装v-viewer插件

npm install v-viewer --save

2、在main.js当中加入以下代码

// 在main.js里设置的话，可以在全局使用import Viewer from "v-viewer";import "viewerjs/dist/viewer.css";Viewer.setDefaults({url: "data-source",// 大图地址参数filter(image) {// 只有大图的才能放大let dataSource = image.getAttribute('data-source')if (dataSource == null || dataSource == undefined) {return false;} else {return true;}}});Vue.use(Viewer);

vue代码块

<template><div v-viewer><divv-for="(item, index) in imgArray":key="item.id"><img:src="这里是缩略图地址":onerror="javascript:this.src='这里是加载错误时显示的图片地址'":data-source="这里是原图地址"/></div></div></template>

使用此方法主要为了快速加载图片，图片加载速度优化。