前端viewer.js实现图片预览

前端viewer.js实现图片预览

github地址

https://github.com/fengyuanchen/viewerjs#options

下载文件

git clone 复制的链接

在js外部依赖中导入如下文件即可使用(/viewerjs\dist文件路径下)

vue非脚手架中使用

"stylesheet" href="../../../js/plugins/viewerjs/viewer.css">

<script src="../../../js/plugins/viewerjs/viewer.js"></script>

<img :title="'创建时间：'+item.createTime+' 大小：'+item.size+'kb'" style="width: 100%;height:100px;cursor: pointer;" @click='getDisplay(item.filePath,index)' :class='"imageClass"+index' :data-original='imageSrc' src="../../../img/image.jpg">

getDisplay(path,index){
     
    const tempPath = path.substring(path.indexOf('fileserver'),path.length);
    this.imageSrc = this.baseURL + tempPath;
    var viewer = new Viewer(document.querySelector(`.imageClass${
       index}`),{
     url:'data-original'});
},

注意点

1.new Viewer(element,Object); 该构造方法，第一个参数必传，是dom或者jquery对象，并且该节点一定得是图片，不然会报错；这样的话，该点击事件getDisplay()绑定在按钮上也是可以的，只要保证两个参数正确。
第二个参数是个对象，是预览图片时的配置栏；

2.img标签上的*:data-original*要绑定的是预览时的图片链接，在这里是动态的，所以我采用绑定方式，在每次new Viewer之前将图片链接赋值过去

3.通常使用默认的配置就足够使用了