React实现多图片预览功能、预览图上下张切换(实战示例)

前言

在React项目中,展示和预览多张图片是一种常见的需求。本篇帖子将介绍如何使用React和antd库来实现这一功能,并探讨如何在预览模态框中切换到前一张或后一张图片。

背景

我们将以一个OCR图像列表展示的示例来演示代码的运用。假设我们有一个OCR系统,可以将图片文件中的文本提取出来。我们希望在前端展示从OCR系统返回的图像列表,并支持点击图片来进行预览。此外,我们还希望在预览模态框中能够实现切换到前一张或后一张图片的功能。下面是具体的操作示例:

操作示例:

  1. 首先,我们需要导入所需的组件和hooks:

    import React, { useEffect, useState } from 'react';
    import { Row, Col, Modal} from 'antd';
    
  2. 接下来,我们定义一个Splitor组件,该组件将用于展示多张图片和实现预览功能:

    const Splitor: React.FC = () => {const [ocrImageList, setOcrImageList] = useState<ETEST.ImageInfo[]>([]); // 图片列表的状态const [visible, setVisible] = useState(false); // 大图预览的可见性状态const [currentImage, setCurrentImage] = useState(""); // 当前点击的图片路径useEffect(() => {const intervalId = setInterval(updateOcrImageList, 1000 * 10); // 创建定时器,每 10 秒钟调用一次 updateOcrImageList 函数// 组件卸载时清除定时器return () => {clearInterval(intervalId);};}, []);const updateOcrImageList = async () => {try {const msg = await ocrList(); // 调用 ocrList 函数获取最新的图片列表console.log('ocrList响应数据=', msg.data);if (msg.isSuccess && msg.data.length > 0) {setOcrImageList(msg.data); // 更新图片列表状态}} catch (error) {console.error(error);}};const handleImageClick = (imagePath: string) => {setCurrentImage(imagePath); // 设置当前点击的图片路径setVisible(true); // 显示大图预览};return (<Row gutter={24}>{/* 遍历渲染图片列表 */}{ocrImageList.map((image) => ({/* 图片容器 */}<Col span={4} key={image.id}>{/* 图片元素 */}<div style={{ border: '1px solid #ccc', borderRadius: '8px', padding: '16px', marginBottom: '20px' }}><imgsrc={image.imgPath}alt={image.id}style={{ width: '100%', objectFit: 'contain', cursor: 'pointer' }}onClick={() => handleImageClick(image.imgPath)} // 点击图片时调用 handleImageClick 函数/></div>{/* 图片描述 */}<div style={{ textAlign: 'center' }}>{image.content}</div> // 显示图片内容</Col>))}{/* 大图预览弹窗 */}<Modal visible={visible} onCancel={() => setVisible(false)} footer={null} className="custom-modal"><img src={currentImage} alt="Preview" style={{ height: "100%", width: "100%" }} /></Modal></Row>);
    };
    

    在上述代码中,我们使用useState来维护了多个状态变量,包括ocrImageList(图片列表数据)、visible(控制模态框的显示与隐藏)、currentImage(当前要预览的图片路径)。

    我们通过updateOcrImageList函数来异步获取ocrImageList数据,并在handleImageClick函数中实现了点击图片触发预览的功能。

    在返回的JSX中,我们通过遍历ocrImageList并使用antdColRow组件来展示图片。图片被点击后,会调用handleImageClick函数来设置currentImagevisible状态,从而展示预览模态框。

拓展(预览图片切换):

  1. 导入新增
   import Lightbox from 'react-image-lightbox';import 'react-image-lightbox/style.css';
  1. 在预览模态框中切换到前一张或后一张图片。以下是相应的代码更改调整:
// ...// 点击图片触发预览功能
const handleImageClick = (index: number) => {setPreviewIndex(index);
};// 关闭预览
const handleClosePreview = () => {setPreviewIndex(-1);
};// 创建预览图片路径数组
const previewImages = ocrImageList.map((image) => image.imgPath);return (<Row gutter={24}>{/* 遍历渲染图片列表 */}{ocrImageList.map((image, index) => (<Col span={4} key={image.id}>{/* 图片容器 */}<div style={{ border: '1px solid #ccc', borderRadius: '8px', padding: '16px', marginBottom: '20px' }}>{/* 图片元素 */}<imgsrc={image.imgPath}alt={image.id}style={{ width: '100%', objectFit: 'contain', cursor: 'pointer' }}onClick={() => handleImageClick(index)} // 点击图片时调用 handleImageClick 函数/></div>{/* 图片描述 */}<div style={{ textAlign: 'center' }}>{image.content}</div></Col>))}{/* 如果正在预览图片,渲染预览模态框 */}{previewIndex !== -1 && (<Lightbox// 配置预览相关属性mainSrc={previewImages[previewIndex]}nextSrc={previewImages[(previewIndex + 1) % previewImages.length]}prevSrc={previewImages[(previewIndex + previewImages.length - 1) % previewImages.length]}onCloseRequest={handleClosePreview}onMovePrevRequest={() => setPreviewIndex((previewIndex + previewImages.length - 1) % previewImages.length)}onMoveNextRequest={() => setPreviewIndex((previewIndex + 1) % previewImages.length)}/>)}</Row>
);// ...

在上面的代码中,我们使用了react-image-lightbox库来实现图片预览功能。当用户点击图片时,将打开预览模态框,并可以在预览模态框中切换到前一张或后一张图片。关闭预览模态框时,预览索引将被重置为-1

注意,上述代码仅为示例。你可以根据自己的需求进行进一步的样式和逻辑调整。

总结

本篇帖子介绍了如何使用React和antd库实现多图片预览功能,并在预览模态框中实现了切换到前一张或后一张图片的拓展功能。通过对状态的管理和处理用户点击事件,我们可以轻松地实现这一功能。希望本篇文章能帮助你理解和应用多图片预览的技术实现方法。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/92010.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux系统编程系列之进程间通信-信号量组

一、什么是信号量组 信号量组是信号量的一种&#xff0c; 是system-V三种IPC对象之一&#xff0c;是进程间通信的一种方式。 二、信号量组的特性 信号量组不是用来传输数据的&#xff0c;而是作为“旗语”&#xff0c;用来协调各进程或者线程工作的。信号量组可以一次性在其内…

【LeetCode】滑动窗口妙解无重复字符的最长子串

Problem: 3. 无重复字符的最长子串 文章目录 思路算法原理分析暴力枚举 哈希表滑动窗口 复杂度Code 思路 首先我们来分析一下本题的思路 如果读者有看过 长度最小的子数组 的话就可以清楚这个子串其实和子数组是一个道理&#xff0c;都是 连续的一段区间但是呢它们本质上还是存…

应用架构的演进:亚马逊的微服务实践

当你在亚马逊上购物时,或许不会想到,你看到的这个购物网站,其背后技术架构经历了什么样的变迁与升级。 还记得上世纪 90 年代,那个只卖书的网上书店吗?那时的亚马逊,不过是一个架构简单的网站,所有的功能都堆积在一个庞大的软件堡垒里。随着更多业务的增加、更新和迭代,这个软…

【小程序 - 基础】页面导航、页面事件、生命周期、WXS脚本_04

目录 一、页面导航 1. 什么是页面导航 2. 小程序中实现页面导航的两种方式 2.1 声明式导航 2.1.1 导航到 tabBar 页面 2.1.2 导航到非 tabBar 页面 2.1.3 后退导航 2.2 编程式导航 2.2.1 导航到 tabBar 页面 2.2.2 导航到非 tabBar 页面 2.2.3 后退导航 2.3. 导航…

从1开始的Matlab(快速入门)

MATLAB软件版本&#xff1a;MATLAB R2016b 本文是博主从零开始学Matlab的记录&#xff0c;适合第一次接触Matlab的同学阅读。 一、基础介绍 1.1界面认识 1.2变量命名 注&#xff1a;Matlab中的注释 %% 独占一行的注释&#xff08;有上下横线分割&#xff09; % 普通注释 …

C语言:选择+编程(每日一练Day9)

目录 选择题&#xff1a; 题一&#xff1a; 题二&#xff1a; 题三&#xff1a; 题四&#xff1a; 题五&#xff1a; 编程题&#xff1a; 题一&#xff1a;自除数 思路一&#xff1a; 题二&#xff1a;除自身以外数组的乘积 思路二&#xff1a; 本人实力有限可能对…

stm32 - 串口

stm32 - 串口 OLED显示屏 OLED显示屏 oled.h #ifndef __OLED_H #define __OLED_Hvoid OLED_Init(void); void OLED_Clear(void); void OLED_ShowChar(uint8_t Line, uint8_t Column, char Char); void OLED_ShowString(uint8_t Line, uint8_t Column, char *String); void OLE…

深入理解 Swift 新并发模型中 Actor 的重入(Reentrancy)问题

问题现象 我们知道,Swift 5.5 引入的新并发模型极大简化了并行逻辑代码的开发,更重要的是:使用新并发模型中的 Actor 原语可以大大降低并发数据竞争的可能性。 不过,即便 Actor 有如此神奇之功效,它也不是“万能药”,仍不能防止误用带来的问题。比如:Actor 重入(Reen…

283. 多边形,《算法竞赛进阶指南》,

283. 多边形 - AcWing题库 “多边形游戏”是一款单人益智游戏。 游戏开始时&#xff0c;给定玩家一个具有 N 个顶点 N 条边&#xff08;编号 1∼N&#xff09;的多边形&#xff0c;如图 1 所示&#xff0c;其中 N4 每个顶点上写有一个整数&#xff0c;每个边上标有一个运算符…

数据分析方法:RFM模型

一、RFM基本原理 RFM是三个单词的缩写&#xff1a; 最近一次消费时间&#xff08;Recency&#xff09;&#xff0c;取数的时候一般取最近一次消费记录到当前时间的间隔&#xff0c;比如&#xff1a;7天、30天、90天未到店消费&#xff1b;直观上&#xff0c;一个用户太久不到…

MySql进阶篇---006:存储引擎,索引,SQL优化,视图、存储过程、变量、流程控制、游标、存储函数、触发器

1. 存储引擎 1.1 MySQL体系结构 1).连接层 最上层是一些客户端和链接服务&#xff0c;包含本地sock 通信和大多数基于客户端/服务端工具实现的类似于TCP/IP的通信。主要完成一些类似于连接处理、授权认证、及相关的安全方案。在该层上引入了线程池的概念&#xff0c;为通过认证…

DETR中的问题汇总(代码)

一、讲述一下torch.tensor()和torch.as_tensor()的区别 torch.tensor() 和 torch.as_tensor() 都是 PyTorch 中用于创建张量&#xff08;Tensor&#xff09;的函数&#xff0c;但它们有一些区别&#xff0c;主要涉及到张量的内存管理方式和数据拷贝。以下是它们的主要区别&…

Redis与分布式-主从复制

接上文 常用中间件-OAuth2 1.主从复制 启动两个redis服务器。 修改第一个服务器地址 修改第二个redis 然后分别启动 redis-server.exe redis.windows.conf) 查看当前服务器的主从状态&#xff0c;打开客户端&#xff1a;输入info replication命令来查看当前的主从状态&am…

2023/10/1 -- ARM

今日任务&#xff1a;select实现服务器并发 ser.c&#xff1a; #include <myhead.h>#define ERR_MSG(msg) do{\printf("%d\n",__LINE__);\perror(msg);\ }while(0)#define PORT 8888#define IP "192.168.1.5"int main(int argc, const char *argv[…

ElementUI动态树,数据表格以及分页的实现

目录 前言 一. ElementUI动态树 二. 数据表格和分页 三. 后端代码 service层 controller层 前言 在上一篇博客中实现了左侧菜单栏&#xff0c;在此基础上将它变为动态的&#xff0c;即动态的展示数据库的数据。还有数据表格的实现以及分页。&#xff08;纯代码分享&#…

pyspark常用功能记录

前言 pyspark中很多常用的功能&#xff0c;过段时间没有使用就容易忘记&#xff0c;需要去网上搜索&#xff0c;这里总结一下&#xff0c;省的以后还去去搜&#xff0c;供自己以后参考。 withColumn def hot_func(info_str):if info_str:eturn "1"return "0&…

新闻报道的未来:自动化新闻生成与爬虫技术

概述 自动化新闻生成是一种利用自然语言处理和机器学习技术&#xff0c;从结构化数据中提取信息并生成新闻文章的方法。它可以实现大规模、高效、多样的新闻内容生产。然而&#xff0c;要实现自动化新闻生成&#xff0c;首先需要获取可靠的数据源。这就需要使用爬虫技术&#…

步进电机只响不转

我出现问题的原因是相位线接错。 我使用的滑台上示17H的步进电机&#xff0c;之前用的是57的步进电机。 57步进电机的相位线是A黑、A-绿、B红、B-蓝。 17步进电机的相位线是A红、A-绿、B黑、B-蓝。 这两天被一个问题困扰了好久&#xff0c;在调试步进电机开发板的时候电机发生…

分类预测 | Matlab实现SSA-CNN-SVM麻雀算法优化卷积支持向量机分类预测

分类预测 | Matlab实现SSA-CNN-SVM麻雀算法优化卷积支持向量机分类预测 目录 分类预测 | Matlab实现SSA-CNN-SVM麻雀算法优化卷积支持向量机分类预测分类效果基本描述程序设计参考资料 分类效果 基本描述 1.Matlab实现SSA-CNN-SVM麻雀算法优化卷积支持向量机分类预测&#xff0…

Sentinel学习(1)——CAP理论,微服务中的雪崩问题,和Hystix的解决方案 Sentinel的相关概念 + 下载运行

前言 Sentinel 是面向分布式、多语言异构化服务架构的流量治理组件&#xff0c;主要以流量为切入点&#xff0c;从流量路由、流量控制、流量整形、熔断降级、系统自适应过载保护、热点流量防护等多个维度来帮助开发者保障微服务的稳定性。 本篇博客介绍CAP理论&#xff0c;微…