最近在做前端项目的时候,需要上次一些图片附件,并且希望点击图片做到预览,可以放大缩小,选择前一张后一张。
虽然这不算一个太难实现的功能,但对我这种非专业前端人员来说,第一解决思路还是去到网络上找现成的库。
前端用的是ant design框架,所以找的资源多是可以直接应用于react的。
viewer.js
star数:4.8k
简介:JavaScript image viewer
在线演示:fengyuanchen.github.io/viewerjs/
使用心得:因为是js库,需要做一些封装处理,没有直接选择用它。
react-viewer
star数:361
简介:react image viewer, supports rotation, scale, zoom and so on
在线演示:infeng.github.io/react-viewe…
使用心得:国内的一位大佬习写的,对viewer.js做了一些封装,react项目可以直接用,提供的功能也很丰富,给人一种很专业的感觉,挺方便的一个组件库。
react-photo-view
star数:51
简介:一款精致的 React 图片预览组件
在线演示: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.
在线演示:guonanci.github.io/react-image…
使用心得:功能上和前面几个库类似,但是图片排布上没有前两个规整,所以也就没有深入研究。
react-zmage
star数:508
简介:一个基于 React 的可缩放图片控件 | A scalable image wrapper power by react
在线演示:zmage.caldis.me/
使用心得:这个库给人一种特别高端的感觉,很有设计感,适合一些高分辨率美图的展示,但是和我的项目的整体风格不搭,没有采用。
总结:
看了github上各路大神的作品,感觉自己还是太菜了,希望自己多加努力,哪天能在github上有自己的项目作品,而不是成天做伸手党。