当前位置：首页 > React

react实现图片预览

2026-01-27 05:14:52React

实现图片预览的基本思路

在React中实现图片预览功能通常需要结合文件上传、缩略图展示以及点击放大查看的逻辑。核心步骤包括处理用户上传的图片、生成预览缩略图、实现模态框放大展示。

使用文件输入和URL.createObjectURL

通过HTML的<input type="file">获取用户选择的图片文件，利用URL.createObjectURL()生成临时URL用于预览：

import { useState } from 'react';

function ImagePreview() {
  const [previewUrl, setPreviewUrl] = useState(null);

  const handleImageChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      const url = URL.createObjectURL(file);
      setPreviewUrl(url);
    }
  };

  return (
    <div>
      <input type="file" accept="image/*" onChange={handleImageChange} />
      {previewUrl && <img src={previewUrl} alt="Preview" style={{ maxWidth: '200px' }} />}
    </div>
  );
}

多图预览实现

对于多张图片的预览，可以使用数组存储多个预览URL：

react实现图片预览

const [previewUrls, setPreviewUrls] = useState([]);

const handleMultipleImages = (e) => {
  const files = Array.from(e.target.files);
  const urls = files.map(file => URL.createObjectURL(file));
  setPreviewUrls(urls);
};

return (
  <div>
    <input type="file" multiple accept="image/*" onChange={handleMultipleImages} />
    <div style={{ display: 'flex', flexWrap: 'wrap' }}>
      {previewUrls.map((url, index) => (
        <img key={index} src={url} alt={`Preview ${index}`} style={{ width: '100px', margin: '5px' }} />
      ))}
    </div>
  </div>
);

使用第三方库实现高级预览

对于更复杂的图片预览需求（如缩放、旋转、幻灯片等），可以考虑使用以下库：

react-image-lightbox：提供模态框形式的图片查看器
```
import Lightbox from 'react-image-lightbox';
```

function LightboxExample() { const [isOpen, setIsOpen] = useState(false); const images = ['image1.jpg', 'image2.jpg'];

react实现图片预览

return (

setIsOpen(true)}>View Images {isOpen && ( setIsOpen(false)} /> )}

); } ```

react-photo-gallery：响应式图片画廊


import Gallery from 'react-photo-gallery';

const photos = [ { src: 'image1.jpg', width: 4, height: 3 }, { src: 'image2.jpg', width: 1, height: 1 } ];

function PhotoGallery() { return ; }


### 自定义模态框实现

如果需要完全自定义的预览体验，可以创建模态框组件：

```jsx
function CustomPreview({ src, onClose }) {
  return (
    <div style={{
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      backgroundColor: 'rgba(0,0,0,0.8)',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      zIndex: 1000
    }}>
      <img src={src} style={{ maxHeight: '90vh', maxWidth: '90vw' }} alt="Full preview" />
      <button 
        onClick={onClose}
        style={{ position: 'absolute', top: '20px', right: '20px' }}
      >
        Close
      </button>
    </div>
  );
}