IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> pc端react预览图片的两款插件,react-images react-images-viewer -> 正文阅读

[JavaScript知识库]pc端react预览图片的两款插件,react-images react-images-viewer

在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 } = props
  return (
    <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 } = props
  return (
    <ImgsViewer
        imgs={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>
    
  )
}

实际的效果和上面的那个也差不多 我们看下哈
在这里插入图片描述
关注我。持续更新 前端知识。

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-10-17 11:54:34  更:2021-10-17 11:56:19 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年12日历 -2024/12/29 19:02:30-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码
数据统计