React项目实现图片预览-viewerjs-react 点击图片放大查看组件,可翻转插件-程序员宅基地

技术标签: react.js  html5  前端  React.js  

项目经常有查看大图预览的需求,如果是自己写的用模态框写的查看大图,只是简单看看还可以,如果需要旋转,放大缩小,反转操作,就会很麻烦。我们可以使用viewerjs-react

一、插件介绍
该插件是根据viewerjs封装的react可以使用:

使用viewerjs-react插件实现图片的预览

1.安装viewerjs-react

npm install --save viewerjs@^1.9.0 viewerjs-react

 2.组件中引入viewerjs-react

 

 3.使用

 

4 效果展示:

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/z611739/article/details/120732958

智能推荐

九九乘法表(python)_99乘法表循环编辑-程序员宅基地

文章浏览阅读418次。使用while循环写九九乘法表。使用for循环写九九乘法表。_99乘法表循环编辑

浅谈对Spring的理解_介绍下你对spring的理解-程序员宅基地

文章浏览阅读624次。Spring框架是一个为Java应用程序的开发提供了综合、广泛的基础性支持的Java平台。Spring是一个十分庞大的体系,具体可以访问它的官网https://spring.io/projects进行详细了解。Spring体系里的常用到的项目:1.SpringFramework2.SpringData3.SpringSecurity4.SpringBoot5.SpringCloud..._介绍下你对spring的理解

mysql5.7 geometry算法_MySQL-程序员宅基地

文章浏览阅读290次。19.2.1.Geometry类的层次几何类定义了下述层次:·Geometry(非实例化)oPoint(可实例化的)oCurve(非实例化)§LineString(可实例化的)·Line·LinearRingoSurface(非实例化)§Polygon(可实例化的)oGeometryCollection(可实例化的)§MultiPoint(可实例化的)§MultiCurve(非实例化)·Mult..._mysql5.7中定义geometry字段时指定srid参考系

SLAM前端 ---------特征提取之ORB(ORB与SIFT与SURF)_orb 轮廓定位-程序员宅基地

文章浏览阅读3.6k次,点赞3次,收藏11次。1.ORB特征简介ORB是Oriented FAST and Rotated BRIEF(oFAST and rBRIEF)的简称,ORB的名字已经说明了其来源,其实ORB特征是采用FAST方法来检测提取特征,但FAST特征本身是不具有方向性的,所以在ORB特征中添加对特征方向的计算;另外,ORB采用BRIEF方法计算特征描述子,BRIEF的优点在于速度,但是缺点也很明显:不具备旋转不变性,对噪..._orb 轮廓定位

Mysql断流_彻底解决ROS网页断流问题-程序员宅基地

文章浏览阅读210次。首先,检查你的ROS,确定他本身没有任何问题。然后,打开你的WINBOX登陆进去,打开防火墙规则,IP-FIREWALL-CONNECTIONS-TRACKING好了。打开TRACKING后,将里面的时间设置稍微大点。具体多大,没有确切数字,不过一定要大。最少也得30秒以上。你按照里面的默认,成倍数增加,慢慢试。下面是我自己的设置。已经没有问题了,具体什么原因,慢慢去体会。这个设置不是固定的。因为..._ros wan口断流

To display the conditions report re-run your application with 'debug' enabled.问题解决方案-程序员宅基地

文章浏览阅读8.2w次,点赞17次,收藏77次。问题描述:Error starting ApplicationContext. To display the conditions report re-run your application with ‘debug’ enabled.或者:The Tomcat connector configured to listen on port 7001 failed to start. The po..._to display the conditions report re-run your application with 'debug' enable

随便推点

python使用imblearn进行采样时报错No module named sklearn.neighbors._base_no module named 'sklearn.neighbors.base-程序员宅基地

文章浏览阅读3.7k次。“No module named 'sklearn.neighbors._base”。这个问题很坑,查了好久都没有发现解决方法,最后终于找到了。其实就是需要将环境重启一下就可以了。_no module named 'sklearn.neighbors.base

APDU SW应答码处理,错误应答码解释_apdu sw 6108-程序员宅基地

文章浏览阅读3k次。摘自: 中国金融集成电路(IC)卡规范第 1 部分:电子钱包电子存折 应用卡片规范 表 A.1 指令状态字列表1SW1SW2_apdu sw 6108

CentOS-消除未被及时释放的TIME_WAIT状态的TCP连接_centos连接不释放-程序员宅基地

文章浏览阅读6.8k次。CentOS_消除未被及时释放的TIME_WAIT状态的TCP连接如发现系统存在大量TIME_WAIT状态的连接,通过调整内核参数解决,vim /etc/sysctl.conf编辑文件,加入以下内容:net.ipv4.tcp_syncookies = 1net.ipv4.tcp_tw_reuse = 1net.ipv4.tcp_tw_recycle = 1net.ipv4.tcp_fin_..._centos连接不释放

[附源码]JAVA毕业设计家政服务网站(系统+LW)_家政服务网站毕设-程序员宅基地

文章浏览阅读233次。[附源码]JAVA毕业设计家政服务网站(系统+LW)目运行环境项配置:Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。项目技术:JAVA + mybatis + Maven + Vue 等等组成,B/S模式 + Maven管理等等。环境需要1.运行环境:最好是java jdk 1.8,我们在这个平台上运行的。其他版本理论上也可以。2.IDE环境:IDEA,E_家政服务网站毕设

ZStack实践汇 | ZStack部署实战之VDI异构部署-程序员宅基地

文章浏览阅读486次。近百位大V支持的“首届ZStack社区征文”已经完美结束啦~上周我们和大家一起分享了王业建的选型经历,这次给大家带来的是来自ZStack社区蒋克勤的VDI异构部署。想要了解更多技术干货请..._zstack 落地部署方案

list、map、set遍历方法总结_便利map,list,set方法-程序员宅基地

文章浏览阅读119次。目录list遍历方法map遍历方法set遍历方法list遍历方法1:该方法有缺陷,当遍历的过程中需要删除或者添加元素,则该遍历方法有问题(此时需要使用迭代器)private void testList(List<String> list) { for (int i = 0; i < list.size(); i ++) { S..._便利map,list,set方法