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

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