解决 viewer.js 动态更新图片导致无法预览的问题

忘是亡心i 2021-12-22 15:37 762阅读 0赞

1、viewer.js 使用 Demo

[http://fengyuanchen.github.io/viewerjs/][http_fengyuanchen.github.io_viewerjs]

2、viewer.js 下载地址

[https://github.com/fengyuanchen/viewerjs][https_github.com_fengyuanchen_viewerjs]

3、viewer只能初始化一次，也就是说如果用ajax添加了新的图片，你再初始化新添加的图片还是出不来，只有第一次初始化加载的图片

4、解决方案

参看官方文档：

![1258343-20190514141921579-1435721623.png][]

5、具体代码实例

1 $.post('your_url', {
     2     param: 'value'
     3 }, function(data) {
     4     var html = '';
     5     for (var i = data.length - 1; i >= 0; i--) {
     6         html += '<li><img src="img_source" ></li>'
     7     }
     8     $("#img_list").append(html);
     9     // 初始化 viewer.js
    10     var viewer = new Viewer(document.getElementById('img_list'), {
    11         toolbar: true,  //显示工具条
    12         viewed() {
    13             viewer.zoomTo(0.75);   // 图片显示比例 75%
    14         },
    15         show: function (){        // 动态加载图片后，更新实例
    16             viewer.update();
    17         },
    18     });
    19 });

转载于:https://www.cnblogs.com/whx-blogs/p/10861981.html

[http_fengyuanchen.github.io_viewerjs]: http://fengyuanchen.github.io/viewerjs/
[https_github.com_fengyuanchen_viewerjs]: https://github.com/fengyuanchen/viewerjs
[1258343-20190514141921579-1435721623.png]: /images/20211220/5c06d1d883de4e38b49cdee183cd3ace.png

发表评论取消回复

表情：

评论列表（有 0 条评论，762人围观）

还没有评论，来说两句吧...

相关阅读

相关 hbuilder预览无法使用的解决办法

hbuilder预览无法使用预览的插件下载不了多半是杀毒软件（例如手机管家，火绒等等）没关闭，把他关闭之后还下载不了的话，就重启计算机，当然杀毒软件不能打开。下载

淩亂°似流年/ 2023年03月13日 13:01/ 0 赞/ 15 阅读

相关 vant 图片预览

使用vant/vue --ts图片预览实现效果 ![在这里插入图片描述][2021010615194537.gif_pic_center] vant ui

ゝ一纸荒年。/ 2023年01月03日 01:20/ 0 赞/ 549 阅读

相关 MarkdownPad2无法预览Markdown文档问题的解决

问题描述安装MarkdownPad2后打开一个markdown文档，在预览markdown文档出现下面错误：![在这里插入图片描述][watermark_type_

港控/mmm°/ 2022年12月12日 12:24/ 0 赞/ 540 阅读

相关单图片预览

implementation 'cn.bingoogolapple:bga-photopicker:1.2.8@aar' implementation

一时失言乱红尘/ 2022年08月29日 15:55/ 0 赞/ 437 阅读

相关图片预览

插件：uploadPreview.min.js <tr> <th>商品图片</th>

Love The Way You Lie/ 2022年07月11日 05:40/ 0 赞/ 509 阅读

相关解决jeesite ckfinder上传中文文件名图片无法预览的问题

\\ 解决jeesite ckfinder上传中文文件名图片无法预览的问题 \\ 一、问题描述 ckfinder 上传中文文件名的图片，无法预览，但已确认上传，

喜欢ヅ旅行/ 2022年06月03日 10:25/ 0 赞/ 208 阅读

相关解决 viewer.js 动态更新图片导致无法预览的问题

1、viewer.js 使用 Demo [http://fengyuanchen.github.io/viewerjs/][http_fengyuanchen.github.

忘是亡心i/ 2021年12月22日 15:37/ 0 赞/ 763 阅读

相关图片预览

定制上传按钮： ![ExpandedBlockStart.gif][] ![复制代码][copycode.gif] <div

「爱情、让人受尽委屈。」/ 2021年12月22日 09:21/ 0 赞/ 728 阅读

相关 Vue图片预览插件viewerjs

GitHub地址：[https://github.com/fengyuanchen/viewerjs][https_github.com_fengyuanchen_viewer

灰太狼/ 2021年12月16日 08:13/ 0 赞/ 1103 阅读

相关 uniapp预览图片

一、需求最近有一个留言板需求，留言之后需要展示留言信息，信息里面除了文字还有图片。点击图片，可预览图片。就用到了 uniapp 预览图片的功能：u

以你之姓@/ 2021年09月03日 05:51/ 0 赞/ 1306 阅读