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

最新推荐文章于 2024-08-08 08:30:37 发布

置顶十一郎678

最新推荐文章于 2024-08-08 08:30:37 发布

阅读量1.3k

点赞数 1

文章标签： vue.js javascript 前端

原文链接：https://my.oschina.net/u/4943666/blog/4898911

版权

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

安装v-viewer

npm install v-viewer --save

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

// 我当前用的v-viewer版本1.5.1
// 在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>