ImagePreview.tsx 776 B

123456789101112131415161718192021222324252627282930313233343536
  1. import React from 'react';
  2. import { CloseOutlined } from '@ant-design/icons';
  3. import './ImagePreview.less';
  4. interface ImagePreviewProps {
  5. src: string | null;
  6. onClose: () => void;
  7. }
  8. const ImagePreview: React.FC<ImagePreviewProps> = ({ src, onClose }) => {
  9. if (!src) return null;
  10. return (
  11. <>
  12. <div
  13. className="image-preview-mask"
  14. onClick={onClose}
  15. />
  16. <div className="image-preview-container" onClick={onClose}>
  17. <img
  18. src={src}
  19. alt="预览"
  20. className="image-preview"
  21. onClick={(e) => e.stopPropagation()}
  22. />
  23. <CloseOutlined
  24. className="image-preview-close"
  25. onClick={onClose}
  26. />
  27. </div>
  28. </>
  29. );
  30. };
  31. export default ImagePreview;