图片预览插件Viewer之踩坑总结

1.引入文件

<link rel="stylesheet" type="text/css" href="/public/js/erp/viewer/viewer.min.css" />
<script src="/public/js/erp/viewer/viewer.js"></script>

2.html部分（方便显示，图片信息内容为动态追加）

<div class="col-sm-9">
    <ul id="showimg">
        <li><img style='cursor:pointer' data-original='原图路径' src='缩略图路径'><button class='removeBtn'>x</button></li>
    </ul>
</div>

3.坑点来了，我项目里使用的是bootstrap中的模态框里展示图片，而且页面里有table表里面有多条数据所以需要每次使用viewer调用插件功能前必须整个页面刷新一下，用户体验相当差；解决方案：自带的destroy方法可以释放预览，这样才不必每次都刷新页面

////退出之前查看的预览
$('#showig').empty();
$("#showimg").viewer('destroy');```

//调用插件
$('#showimg').viewer({url:"data-original"});