| 123456789101112131415161718192021222324252627282930313233343536 |
- import React from 'react';
- import { CloseOutlined } from '@ant-design/icons';
- import './ImagePreview.less';
- interface ImagePreviewProps {
- src: string | null;
- onClose: () => void;
- }
- const ImagePreview: React.FC<ImagePreviewProps> = ({ src, onClose }) => {
- if (!src) return null;
- return (
- <>
- <div
- className="image-preview-mask"
- onClick={onClose}
- />
- <div className="image-preview-container" onClick={onClose}>
- <img
- src={src}
- alt="预览"
- className="image-preview"
- onClick={(e) => e.stopPropagation()}
- />
- <CloseOutlined
- className="image-preview-close"
- onClick={onClose}
- />
- </div>
- </>
- );
- };
- export default ImagePreview;
|