Ant Design预览多张图

简单的多图预览配置，满足放大缩小关闭左右切换即可

import { Image } from "antd";DOM写法:
<Image.PreviewGroup preview={{ visible: imageVisible, current: currentPreviewIndex, onVisibleChange: (vis) => setImageVisible(vis) }} >{(frameCaptureList[0] || []).map((frameItem: any, frameIndex: number) => (<Image key={frameIndex} src={frameItem.url} preview={{ mask: false }} style={{ display: 'none' }} />))}
</Image.PreviewGroup>变量定义：
const [imageVisible, setImageVisible] = useState(false); // 是否预览图片
const [currentPreviewIndex, setCurrentPreviewIndex] = useState<number>(0); // 当前预览图片索引js逻辑:
// 当前预览图片点击事件
const onPreviewImage = (index) => {setImageVisible(true);setCurrentPreviewIndex(index);
}

上面是react的写法，其他框架写法类似

其他配置查看：图片 Image - Ant Design