在pc端预览图片还是常见的业务，但是吧 antd中好像没有直接预览图片的插件，
但是你可以通过 Modal 和 Carousel 两个插件配合起来封装一个。
当然你也可以直接找一个预览图片的插件
这里就推荐两个插件。
react-images 和。react-images-viewer

react-images

1. 安装

yarn add react-images --save
or
npm/cnpm i react-images --save

2. 在代码中使用

可以直接封装成一个组件方便以后使用
其实这个组件可以直接拿过去使用

import Carousel, { Modal, ModalGateway } from 'react-images'
import PropTypes from 'prop-types'
const PreviewImages = (props) => {const { isShow, toggle, images } = propsreturn (<ModalGateway>{isShow ? (<Modal onClose={toggle}><Carousel views={images} /></Modal>) : null}</ModalGateway>)
}
PreviewImages.propTypes = {toggle: PropTypes.func,isShow: PropTypes.bool,images: PropTypes.arrayOf(PropTypes.object)
}
PreviewImages.defaultProps = {toggle: () => {},isShow: false,images: []
}

3. 实际效果

// 图片的数据结构是这样的
const images = [{ source: ‘demo1.png’}, { source: ‘demo2.png’ }]

const App = props => {console.log(PropTypes,)const [show, setShow] = useState(false)const images = [{ source: 'demo1.png'}, { source: 'demo2.png' }, {source: 'demo3.png'}]return (<div><button onClick={() => setShow(true)}>预览图片</button><PreviewImages isShow={show}toggle={() => setShow(!show)}images={images}/></div>)
}

也可以添加一个放大的按钮。也放大图片

react-images-viewer

其实吧本来上面的那个插件就可以，但是看见git上描述的一句话中说请不要在你的新项目中使用，因为这个插件很久没有得到正常的维护了。

搞的我很害怕，我看了下最新的那个就是三年前维护的慎重起见还是选择换一款再找一找。
就找到了第二个插件

基本步骤还是和上面的那个一样。第一步安装啥的

yarn add react-images-viewer --save

也是封装成一个组件. PreviewImage

import ImgsViewer from "react-images-viewer";
import PropTypes from 'prop-types'
const PreviewImages = (props) => {const { isShow, toggle, images, index, nextImg, preImg } = propsreturn (<ImgsViewerimgs={images}currImg={index}isOpen={isShow}onClickPrev={preImg}onClickNext={nextImg}onClose={toggle}/>)
}
PreviewImages.propTypes = {toggle: PropTypes.func.isRequired,nextImg:PropTypes.func.isRequired,preImg:PropTypes.func.isRequired,isShow: PropTypes.bool,images: PropTypes.arrayOf(PropTypes.object),index: PropTypes.number.isRequired
}
PreviewImages.defaultProps = {toggle: () => {},nextImg: () => {},preImg: () => {},isShow: false,images: []
}

图片的数据结构是
const images = [{ src: ‘’ }, { src: ‘’ }, {src: “” }]
实际应用代码

const App = props => {console.log(PropTypes,)const [show, setShow] = useState(false)const [index, setIndex] = useState(0)const images = [{ src: 'demo1.png' }, { src: 'demo2.png' }, {src: 'demo3.png' }]return (<div><button onClick={() => setShow(true)}>预览图片</button><PreviewImages isShow={show}toggle={() => setShow(!show)}images={images}index={index}nextImg={() => setIndex(index + 1)}preImg={() => setIndex(index - 1)}/></div>)
}

实际的效果和上面的那个也差不多我们看下哈

关注我。持续更新前端知识。

pc端react预览图片的两款插件，react-images, react-images-viewer相关推荐

手机端与PC端在线预览PDF
问题场景公司需要把出具的报告在PC端在线预览,之前一直用embed标签解决,效果很好.产品提出在手机端(微信链接或者手机浏览器)也要在线预览,尴尬的是安卓端提示的是下载,IOS端只能看不能滑动.经一 ...
移动端查看预览图片放大缩小
方法一之前介绍过一款移动端vue适用的插件大全 https://blog.csdn.net/MtangEr/article/details/85339092 里边有一篇是查看图片放大缩小的 htt ...
React 预览图片视频音频_2月14日高一作业讲解图片、音频、视频律综合应用||物理纪录片||【物理选择题秒杀法】单位判断法...
[前五期链接] 24.回应"立扫把"挑战||2月11.12日晚作业讲解直播视频录像||"滑块-滑板"问题||作图法秒杀选择题 23.冯艳芳顺口溜朗读||微课制作 ...
React 预览图片视频音频_格式工厂——视频、文档、音频、图片、CD格式转换...
1 软件简介格式工厂是套万能的多媒体格式转换器,提供以下功能:所有类型视频转MP4/3GP/MPG/AVI/WMV/FLV/SWF.格式工厂所有类型音频转到MP3/WMA/MMF/AMR/OGG/M ...
react 预览图片 @hanyk/rc-viewer
1.安装包 npm i @hanyk/rc-viewer 2.引入 import RcViewer from "@hanyk/rc-viewer"; 3.使用 let option ...
手机端html5展示pdf,pdf.js移动端展示预览打开pdf-pdfh5.js
pdf.js移动端展示预览打开pdf-pdfh5.js 本插件基于pdf.js和jQuery,可手势捏合缩放,支持懒加载(即分段加载). 2019.07.18更新:增加npm install pdfh ...
elementui 使用el-image 控件解决通过点击查看按钮两次才能实现预览图片
需求:点击查看按钮,将图片显示出来. 问题:查看按钮必须触发两次才会将图片显示出来前端效果: 点击查看按钮,弹出来图片图片展示: 解决方法有两种: 第一种调用Image 的源码中的image-v ...
pdfh5.js 基于pdf.js和jQuery，web/h5/移动端PDF预览手势缩放插件。
pdfh5.js 基于pdf.js和jQuery,web/h5/移动端PDF预览手势缩放插件. 注意:本地绝对路径地址不能加载,跨域问题用代理或者服务端解决. svg模式渲染存在缺陷,只能渲染普通pd ...
微信公众平台上传和预览图片
1.在index.html中引入js文件:http://res.wx.qq.com/open/js/jweixin-1.6.0.js 2.通过config接口注入权限验证配置,进行微信认证: wx.c ...

pc端react预览图片的两款插件，react-images, react-images-viewer