antd Image图片组件增加下载图片的按钮

主要代码

import { InfoCircleOutlined, SearchOutlined, SyncOutlined, TranslationOutlined, DownloadOutlined } from '@ant-design/icons'

{Array.isArray(message.images) && message.images.length > 0 ? ( <div style={{ display: 'flex', gap: 5, alignItems: 'center' }}> {message.images.map((item: any, index: number) => ( <ImageWrapper key={index}> <Image src={item?.image_url?.url} style={{ maxWidth: 200 }} alt="pic" /> <DownloadButton className="download-button" onClick={() => { const link = document.createElement('a') link.href = item?.image_url?.url link.download = `image-${index + 1}.png` link.target = '_blank' document.body.appendChild(link) link.click() document.body.removeChild(link) }} title={t('common.download') || '下载图片'} > <DownloadOutlined /> </DownloadButton> </ImageWrapper> ))} </div> ) : null}

const ImageWrapper = styled.div` position: relative; display: inline-block; &:hover { .download-button { opacity: 1; } } ` const DownloadButton = styled.button` position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 6px; background: rgba(0, 0, 0, 0.6); border: none; color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: all 0.2s ease; backdrop-filter: blur(4px); z-index: 10; &:hover { background: rgba(0, 0, 0, 0.8); transform: scale(1.1); } &:active { transform: scale(0.95); } svg { font-size: 16px; } `