antd 实现点击文字预览图片

2,435 阅读1分钟

官方API地址

image.png

官方有【从一张图片开始预览】的例子,将其改造一下,就可以实现,点击文字,开始图片预览:

<Button type='link' onClick={() => setVisible(true)}> 图片预览 </Button> 
<div style={{ display: 'none' }}>
    <Image.PreviewGroup preview={{ visible, onVisibleChange: vis => setVisible(vis) }}> 
        <Image src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp" />
        <Image src="https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp" />
        <Image src="https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp" />
    </Image.PreviewGroup> 
</div>