React使用antd的图片预览组件,点击哪个图片就预览哪个的设置
使用了官方推荐的相册模式的预览,但是点击预览之后,每次都是从图片列表的第一张开始预览,而不是点击哪张就从哪张开始预览:
所以这里我就封装了一下,对初始化预览的列表进行了逻辑处理:
当点击开始预览的时候,要找到当前图片在预览图列表中的索引,然后设置为当前预览图索引,然后等点击左右切换的时候,要改变这个索引,所以要使用onChange函数,等点击关闭按钮的时候,还要重置这个索引为点击时候的图片索引:
import './index.scss'
import { Image } from 'antd'
import { useState } from 'react'export default function ImageItem(props: any) {// console.log('props', props)const preList = ['https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp','https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp','https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp',]const [preIndex, setIndex] = useState(preList.indexOf(props.imgUrl))// 当点击前后切换的时候,修改当前预览图const handleSwitch = (current: number, prevCurrent: number) => {console.log('切换预览图', current, prevCurrent)setIndex(current)}// 关闭预览图是重置预览为当前图索引const handleClose = (visible: boolean) => {console.log('关闭预览图', visible)if (!visible) {setIndex(preList.indexOf(props.imgUrl))}}return (<div className="file"><Image.PreviewGroupitems={preList}preview={{minScale: 0.1,current: preIndex,onChange: handleSwitch,onVisibleChange: handleClose,}}><Image className="item-img" src={props.imgUrl} /></Image.PreviewGroup></div>)
}
预览结果: 
相关文章:
React使用antd的图片预览组件,点击哪个图片就预览哪个的设置
使用了官方推荐的相册模式的预览,但是点击预览之后,每次都是从图片列表的第一张开始预览,而不是点击哪张就从哪张开始预览: 所以这里我就封装了一下,对初始化预览的列表进行了逻辑处理: 当点击开始预览的…...
排序的介绍
排序算法介绍 排序是计算机内经常进行的一种操作,其目的是将一组“无序”的记录序列调整为“有序”的记录序列 粗暴理解 将杂乱无章的数据元素,通过一定的方法按照关键字顺序排列的过程叫做排序 排序分内部排序和外部排序,若整个排序过程不需…...
appuploader使用教程
转载:appuploader使用教程 目录 问题解决秘籍 登录失败 don’t have access,提示没权限或同意协议 上传后在app管理中心找不到版本提交 不是等待上传状态 提示已经上传过包 上传提示tcpPort or udpPorts错误 上传提示已经有进程在上传 保存上传专用密码提示…...
企业权限管理(七)-权限操作
1. 数据库与表结构 1.1 用户表 1.1.1 用户表信息描述 users 1.1.2 sql语句 CREATE TABLE users( id varchar2(32) default SYS_GUID() PRIMARY KEY, email VARCHAR2(50) UNIQUE NOT NULL, username VARCHAR2(50), PASSWORD VARCHAR2(50), phoneNum VARCHAR2(20), STATUS INT )…...
【深度学习笔记】TensorFlow 常用函数
TensorFlow 提供了一些机器学习中常用的数学函数,并封装在 Module 中,例如 tf.nn Module 提供了神经网络常用的基本运算,tf.math Module 则提供了机器学习中常用的数学函数。本文主要介绍 TensorFlow 深度学习中几个常用函数的定义与用法&…...
函数的递归与迭代
递归经典问题:(自行尝试) 1、汉诺塔问题 2、青蛙跳台阶问题 练习1、 练习2、...
win10 + VS2022 安装opencv C++
最近需要用到C opencv,看了很多帖子都需要自己编译opencv源码。为避免源码编译,可以使用VS来配置opencv C。下面是主要过程: 目录 1. 从官网下载 opencv - Get Started - OpenCV 2. 点击这个exe文件进行安装 3. 配置环境变量 4. VS中的项…...
nginx反向代理及负载均衡的实现
目录 1.nginx反向代理 2.nginx负载均衡 3.nginx反向代理及负载均衡实现 nginx反向代理 4台主机都需要的操作: 两台服务器操作: 两台主机服务器进行测试; nginx负载均衡配置 4.nginx配置其他参数 多虚拟机访问 后端服务器日志中需要…...
Tomcat部署SpringBoot项目
1.修改打包方式 pom.xml 里 加上 <packaging>war</packaging>2.移除内嵌的Tomcat <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-tomcat</artifactId><scope>provided</scope…...
Oracle笔记--dblink
概述 1、database link是定义一个数据库到另一个数据库的路径的对象,database link允许你查询远程表及执行远程程序。在任何分布式环境里,database都是必要的。另外要注意的是database link是单向的连接。 2、在创建database link的时候,Ora…...
Mapbox加载天地图CGCS2000矢量瓦片地图
1.背景 最近在做天地图的项目,要基于MapBox添加CGCS2000矢量切片数据,但是 Mapbox 只支持web 墨卡托(3857)坐标系的数据。Github有专业用户修改了mapbox-gl的相关代码,支持CGCS2000的切片数据加载,并且修改…...
day3 STM32 GPIO口介绍
GPIO接口简介 通用输入输出接口GPIO是嵌入式系统、单片机开发过程最常用的接口,用户可以通过编程灵活的对接口进行控制,实现对电路板上LED、数码管、按键等常用设备控制驱动,也可以作为串口的数据收发管脚,或AD的接口等复用功能使…...
【ElasticSearch】ElasticSearch 内存设置原则
由于ES构建基于lucene,而lucene设计强大之处在于lucene能够很好的利用操作系统内存来缓存索引数据,以提供快速的查询性能。lucene的索引文件segements是存储在单文件中的,并且不可变,对于OS来说,能够很友好地将索引文件保持在cach…...
VUE+ElementUI的表单验证二选一必填项,并且满足条件后清除表单验证提示
上代码 <el-form-item label"出库单号" prop"ecode" ref"ecode" :rules"rules.ecode"><el-input v-model"queryParams.ecode" placeholder"出库单号和出库箱号至少填写一项" clearable style"width…...
NLP 时事和见解【2023】
一、说明 AI的新闻当然不是即时的,但作为趋势和苗头,我们不得不做出自己的决定。比如,一些软件的支持是否持续,哪些现成的软件将不再使用,等等。 图片来自中途 以下是NLPlanet为您选择的有关NLP和AI的每周文章&#x…...
Windows 环境下 Python3 离线安装 cryptography 失败
发布Flask Web项目时,报错缺少Cryptography,于是尝试重新安装该库,但本机没有网络,只支持手动离线安装,尝试了pip、setup.py两种方式安装,结果都报错。。最后使用将安装包拷贝至本机(在其他电脑上安装的sit…...
年轻代频繁GC ParNew导致http变慢
背景介绍 某日下午大约四点多,接到合作方消息,线上环境,我这边维护的某http服务突然大量超时(对方超时时间设置为300ms),我迅速到鹰眼平台开启采样,发现该服务平均QPS到了120左右,平…...
在.NET 6.0中自定义接口路由
在本文中,我们将讨论ASP.NET Core中的新路由。我们将了解什么是接口(endpoints)路由,它是如何工作的,它在哪里使用,以及如何创建自己的路由。 本文主题: 探索接口路由创建自定义接口创建更复杂的接口 名词定义&#…...
Kotlin读写分离CopyOnWriteArrayList
Kotlin读写分离CopyOnWriteArrayList 基于读写分离思想Copy-On-Write(COW)设计的线程安全ArrayList变体,读读共享、写写互斥、读写互斥、写读互斥。读时直接读,不用加锁同步,线程安全。写/删/修改数据时复制一个副本,在新的List副…...
centos自动同步北京时间
1、安装ntpdate服务 yum -y install ntpdate 2、加入自动任务计划 查找ntpdate的路径: which ntpdate 复制这个路径。 编辑自动任务计划并加入ntpdate: crontab -e # 每小时第30分钟同步AD域控时间 30 * * * * /usr/sbin/ntpdate -u 192.168.2.8 > …...
利用ngx_stream_return_module构建简易 TCP/UDP 响应网关
一、模块概述 ngx_stream_return_module 提供了一个极简的指令: return <value>;在收到客户端连接后,立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量(如 $time_iso8601、$remote_addr 等)&a…...
《Playwright:微软的自动化测试工具详解》
Playwright 简介:声明内容来自网络,将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具,支持 Chrome、Firefox、Safari 等主流浏览器,提供多语言 API(Python、JavaScript、Java、.NET)。它的特点包括&a…...
UDP(Echoserver)
网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法:netstat [选项] 功能:查看网络状态 常用选项: n 拒绝显示别名&#…...
基于当前项目通过npm包形式暴露公共组件
1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹,并新增内容 3.创建package文件夹...
生成 Git SSH 证书
🔑 1. 生成 SSH 密钥对 在终端(Windows 使用 Git Bash,Mac/Linux 使用 Terminal)执行命令: ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" 参数说明: -t rsa&#x…...
Java入门学习详细版(一)
大家好,Java 学习是一个系统学习的过程,核心原则就是“理论 实践 坚持”,并且需循序渐进,不可过于着急,本篇文章推出的这份详细入门学习资料将带大家从零基础开始,逐步掌握 Java 的核心概念和编程技能。 …...
保姆级教程:在无网络无显卡的Windows电脑的vscode本地部署deepseek
文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama(有网络的电脑)2.2.3 安装Ollama(无网络的电脑)2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...
HubSpot推出与ChatGPT的深度集成引发兴奋与担忧
上周三,HubSpot宣布已构建与ChatGPT的深度集成,这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋,但同时也存在一些关于数据安全的担忧。 许多网络声音声称,这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...
在树莓派上添加音频输入设备的几种方法
在树莓派上添加音频输入设备可以通过以下步骤完成,具体方法取决于设备类型(如USB麦克风、3.5mm接口麦克风或HDMI音频输入)。以下是详细指南: 1. 连接音频输入设备 USB麦克风/声卡:直接插入树莓派的USB接口。3.5mm麦克…...
系统掌握PyTorch:图解张量、Autograd、DataLoader、nn.Module与实战模型
本文较长,建议点赞收藏,以免遗失。更多AI大模型应用开发学习视频及资料,尽在聚客AI学院。 本文通过代码驱动的方式,系统讲解PyTorch核心概念和实战技巧,涵盖张量操作、自动微分、数据加载、模型构建和训练全流程&#…...
