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"});
原文链接:https://blog.csdn.net/living_ren/article/details/80597118
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
评论前必须登录!
立即登录