viewer动态加载图片第一次点击预览图片失败的问题

如果您搜到这篇文章的话，那估计您遇到跟我一样的问题了.
众所周知,每一个插件都有很多坑,比如说市面上比较火爆的图片浏览插件viewer,有js版本和jqery版本的,尽管这两个版本不一样,但是大同小异.
话不多说直接上代码

HTML部分

 <div style="min-height:180px;"><ul class="barcode_img" id="style_img"><li v-for="m in styleImgList"><img v-bind:src="'/Resource/Product/'+m.url" style="width:80px;height:80px;" /></li></ul></div>

js部分
敲黑板!!!划重点!!!

//这一段是vue里面的,在dom都渲染完时的成功回调,一定要放在这里执行,也就是js里面的window.onload 函数;
this.$nextTick(function () {var viewerStyle = new Viewer(document.getElementById('style_img'), {// 相关配置项,详情见下面show: function () {        // 动态加载图片后，更新实例//viewerStyle.update();//这一段只能更新图片展示,并不能解决第一次动态加载无法点击查看大图的问题,下面一个才是解决方案viewerStyle.view(0).update();},});})

viewer动态加载图片第一次点击预览图片失败的问题相关推荐

【MFC】动态加载Picture Control控件中的图片
[MFC]动态加载Picture Control控件中的图片前言方法1:CBrush 方法2:SetBitmap 参考链接方法3:重写MyPictureControl 前言在MFC窗体中,我们 ...
加载js文件，在线预览pdf文档
加载js文件,在线预览pdf文档效果演示环境要求 JS文件下载 Jsp页面导入js文件 jquery.media.js源码效果演示首先,先展示效果图环境要求 Tomcat8.5 [注意]:T ...
使用GridView实现仿微信发朋友圈添加图片，点击预览、删除图片
最近在项目中有一个用户反馈的功能中要上传图片,和微信发朋友圈添加图片的功能其实有点类似,所以我想着用GridView来实现这个功能,整个过程也很简单,画不多说,详细步骤见下: 1.先来看MainAct ...
vue点击预览图片插件（可放大缩小翻转等）
开发工具webstorm 首先npm安装插件:npm install viewerjs 然后再main.js中引用 import Viewer from 'v-viewer' import 'view ...
element表格里面放图片_elementUI 表格中预览图片
表格中有一列显示的图片,现需要点击图片,预览该图片,使用的elementui中的previewSrcList做的图片预览, 但是测试发现,无论点击表格中的那张图片,预览的大图都是从第一张图片,开始预览 ...
纯js实现点击预览图片效果
效果如图所示具体实现如下 //点击放大 function clickImg(){var lis=document.getElementById('imgList').getElementsByTag ...
vue swiper中点击预览图片全屏预览图片 vue点击查看大图
希望实现的效果,见下图使用到的插件使用到的插件 vue-photo-preview 第一步:安装插件 npm install vue-photo-preview --save 第二步:引用 imp ...
Java图片流导出图片为黑屏,Matisse预览图片黑屏，Glide内存溢出
项目中要到图片.视频选择的功能,然后google了一下,找到Matisse,知乎的图片选择框架,用的人还挺多的,果断依赖gradle,然后开始我的踩坑之旅. 首先,框架本身的图片框架glide是v3版 ...
android jar 加入图片,Android动态加载外部jar包及jar包中图片等资源文件
Android动态加载外部jar包及jar包中图片等资源文件 Android应用程序由Java开发,因此Java中许多实用的特性,在Android中也有体现.动态加载Class,也就是外部jar包,在 ...

viewer动态加载图片第一次点击预览图片失败的问题

viewer动态加载图片第一次点击预览图片失败的问题相关推荐

最新文章

热门文章