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

最新推荐文章于 2024-04-12 14:36:46 发布

living_ren

最新推荐文章于 2024-04-12 14:36:46 发布

阅读量6.7k

点赞数 3

分类专栏： JS 文章标签： viewer插件

本文链接：https://blog.csdn.net/living_ren/article/details/80597118

版权

本文总结了在使用Viewer图片预览插件时遇到的问题，特别是当插件在Bootstrap模态框中展示多张图片时，由于页面刷新导致的用户体验不佳。通过深入研究，找到了利用destroy方法释放预览资源的解决方案，从而避免了页面刷新的必要。

摘要由CSDN通过智能技术生成

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=

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

living_ren

关注关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue 实现图片预览v-viewer插件使用，图片预览旋转缩放

u010244957的博客

07-03

1888

v-viewer实现图片的预览、缩放和旋转等功能；

v-viewer图片预览插件遇到的bug 以及使用

anwenagululu的博客

10-07

783

这里是因为图片列表需要以跑马灯的形式展示，并且点击图片预览时也要是数组形式，所以通过ref方式来使用。Vue3图片浏览组件v-viewer，支持旋转、缩放、翻转等操作 - Mirari's Blog。v-viewer图片预览插件设置setDefaults 不生效的问题。配置项main.js中。

2 条评论您还未登录，请先登录后发表或查看评论

springboot，bootstrap，viewerjs

07-04

集合springboot，页面控件bootstrap，图片查看器viewerjs的基础框架实现

bootstrap-viewer-template, 交互式地图查看器的一些种子 Bootstrap 模板.zip

09-18

bootstrap-viewer-template, 交互式地图查看器的一些种子 Bootstrap 模板 bootstrap-viewer-template交互式地图查看器的一些种子 Bootstrap 模板。在每次需要这种布局的时候，我都厌倦了创建这些布局，所以这应该是任何构建基于bootstrap的地图查看器的一个不错起点。2-c

在bootstrap的模态框modal中使用viewer.js插件打开的图片不居中的问题

LLL_liuhui的博客

07-25

2198

viewer.js下载地址：https://github.com/fengyuanchen/viewer 使用viewer.js图片查看插件，在bootstrap的modal里使用的时候遇到了问题，图片不居中，在网上搜了一下，找到了解决办法：就是使用模态框的id $("#modal").viewer({url: 'data-original'}); 而不是： $('#dowebok...

bootstrap-pdfjs-viewer：具有PDF.js查看器的简单Bootstrap网站

02-12

bootstrap-pdfjs-查看器一个带有PDF.js查看器的简单Bootstrap网站要在本地运行此项目，请导航到Node.js终端中的项目文件夹，然后运行以下命令： npm i npm start 这将打开浏览器，并显示一个新选项卡，显示PDF.js查看器。

vue项目中使用viewer实现放大功能时出现bug

qq_40090480的博客

07-31

1061

vue项目中使用viewer实现放大功能时出现bug bug描述：用饿了么组件的dialog进行弹窗，弹窗中有图片需要实现点击放大功能，可在dialog中使用viewer，会导致方法的图片一会在弹窗前，一会在弹窗后，这样的话，会导致用户体验特别差，网上搜了好久，好像没人遇到这样的问题，应该是我太菜了，求大佬伸出援助之手！！！！下面放一些图和相关代码：背后涂鸦的就是放大后的图片，我是希望他能在查看等级响应页面之前的，这样就能在不关闭弹窗的情况下关闭图片，求大佬帮助！！！！ ...

viewer.js图片预览插件

01-09

**标题详解：** "viewer.js图片预览插件" 是一个专门用于图片预览的JavaScript库，它提供了方便的功能，使用户能够在网页上快速、高效地预览图片。这个插件设计灵活，可以在不同的项目中独立使用，无需依赖其他大型...

viewer.js 图片预览插件

01-11

**viewer.js 图片预览插件** viewer.js 是一个轻量级且易于使用的JavaScript插件，专门用于在网页上实现图片预览功能。这个插件适用于各种设备，包括桌面和移动端，使得用户在点击图片后能够快速查看大图并进行交互...

图片预览插件 viewer

02-10

总结，图片预览插件 viewer 是网页应用中不可或缺的一部分，它通过高效的技术手段和丰富的自定义选项，为用户提供便捷、流畅的图片浏览体验。在实际开发中，选择合适的 viewer 插件并合理配置，可以极大地提升网站或...

viewer.min.css

02-04

viewer的css文件

强大的图片查看器插件Viewer.js原生版和jQuery版

11-10

Viewer.js是一款非常强大的图片弹窗查看器，点击图片弹窗查看，它支持全屏自动播放图片、放大缩小图片、鼠标拖拽图片、水平和垂直翻转图片、顺时针逆时针旋转图片等等，而且，它是响应式的布局，兼容手机pc各种尺寸的屏幕。Viewer.js有js版本和jQuery版本两种，PC端可以选择jQuery版本，手机端可以选择js版本，选择性广。

一款网页图片预览插件：viewer

04-08

【Viewer图片预览插件详解】 Viewer是一款专为网页设计的高效、易用的图片预览插件，它能够提供良好的用户体验，使用户在网页上查看图片时更加便捷。这款插件基于HTML和JavaScript技术，适用于各种现代浏览器，极大...

viewer.js销毁

powderhose的博客

04-06

7632

1.创建viewer视图 $(document).on('mousedown','.credentialsImg',function () { if($(this).attr('src')){ $(this).viewer( { 'hidden': function (e) {

图片预览插件viewer.js的初级使用

最新发布

m0_56930676的博客

04-12

2328

网上看了很多viewer.js插件的使用都基本都是用不了的，或者不符合需求。这个只是简单使用，还有很多没有用到。//纯JS版本本地下载：https://github.com/fengyuanchen/viewerjs。//viewer.min.css与viewer.min.js必不可少的要引入。//先展示代码（例子可以直接运行不用下载），再说明参数意义。自己很简单总结一下。JavaScript版的。二、参数说明（直接copy的网上搜的）Viewer.js的API。

js功能之使用viewer图片查看器实现图片浏览效果（亲测简单好用）

PowerYellow1的博客

01-08

4034

Viewer.js 是一款强大的图片查看器，像门户网站一般都会有各自的图片查看器，如果您正需要一款强大的图片查看器，也许 Viewer.js 是一个很好的选择。支持移动设备触摸事件支持响应式支持放大/缩小支持旋转（类似微博的图片旋转）支持水平/垂直翻转支持图片移动支持键盘支持全屏幻灯片模式（可做屏保）支持缩略图支持标题显示支持多种自定义事件。

PC端使用viewer.js实现图片预览，放大，缩小，旋转等功能

hu104160112的博客

12-16

2240

GitHub地址：https://github.com/fengyuanchen/viewerjs 在线演示地址：https://fengyuanchen.github.io/viewerjs <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-

viewer.js插件--图片预览，放大，旋转，镜像翻转，幻灯片播放等功能

白白的博客

02-04

2740

var viewer = new Viewer(document.getElementById('yyzh_img'), { url: 'data-original', toolbar: { zoomIn: 4, zoomOut: 4, oneToOne: false, reset: true, prev: false, play: { show: false, size: 'large', }, next: .

vue2 图片预览插件

10-20

Vue2图片预览插件是一个基于Viewer.js的Vue组件，可以方便地实现图片的预览功能。使用该插件需要先安装Viewer.js和v-viewer插件，然后在Vue中引用并注册该插件，最后在需要预览图片的地方使用<viewer>标签，并传入图片的src和index等参数即可。同时，该插件还支持自定义配置，可以通过调用setDefaults方法来设置预览时的各种参数，例如是否显示缩略图、是否支持键盘操作等。在预览图片时，还可以通过监听各种事件来实现一些自定义的操作，例如旋转图片、全屏显示等。