github上的图片预览的js插件整理

6,567 阅读2分钟

最近在做前端项目的时候,需要上次一些图片附件,并且希望点击图片做到预览,可以放大缩小,选择前一张后一张。

虽然这不算一个太难实现的功能,但对我这种非专业前端人员来说,第一解决思路还是去到网络上找现成的库。

前端用的是ant design框架,所以找的资源多是可以直接应用于react的。

viewer.js

star数:4.8k

简介:JavaScript image viewer

项目地址:github.com/fengyuanche…

在线演示:fengyuanchen.github.io/viewerjs/

使用心得:因为是js库,需要做一些封装处理,没有直接选择用它。

react-viewer

star数:361

简介:react image viewer, supports rotation, scale, zoom and so on

项目地址:github.com/infeng/reac…

在线演示:infeng.github.io/react-viewe…

使用心得:国内的一位大佬习写的,对viewer.js做了一些封装,react项目可以直接用,提供的功能也很丰富,给人一种很专业的感觉,挺方便的一个组件库。

react-photo-view

star数:51

简介:一款精致的 React 图片预览组件

项目地址:github.com/MinJieLiu/r…

在线演示:minjieliu.github.io/react-photo…

使用心得:也是国内的一位大佬写的,从他的演示网站上,可以看出应该是个二次元爱好者,提供的功能不多,但是非常简洁好用,还给出了非常完整的例子。我最终选用这个库。

react-photo-view

star数:40

简介:A react library that view photos list easily, and a simple, responsive viewer component for displaying an array of images.

项目地址:github.com/guonanci/re…

在线演示:guonanci.github.io/react-image…

使用心得:功能上和前面几个库类似,但是图片排布上没有前两个规整,所以也就没有深入研究。

react-zmage

star数:508

简介:一个基于 React 的可缩放图片控件 | A scalable image wrapper power by react

项目地址:github.com/Caldis/reac…

在线演示:zmage.caldis.me/

使用心得:这个库给人一种特别高端的感觉,很有设计感,适合一些高分辨率美图的展示,但是和我的项目的整体风格不搭,没有采用。

总结:

看了github上各路大神的作品,感觉自己还是太菜了,希望自己多加努力,哪天能在github上有自己的项目作品,而不是成天做伸手党。