react实现图片视频预览

实现图片预览

在React中实现图片预览可以使用第三方库如react-image-lightbox或自定义模态框组件。以下是使用react-image-lightbox的示例：

安装依赖：

npm install react-image-lightbox

代码示例：

import React, { useState } from 'react';
import Lightbox from 'react-image-lightbox';
import 'react-image-lightbox/style.css';

function ImagePreview() {
  const [isOpen, setIsOpen] = useState(false);
  const images = [
    'image1.jpg',
    'image2.jpg',
    'image3.jpg'
  ];
  const [photoIndex, setPhotoIndex] = useState(0);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>
        Open Image Viewer
      </button>

      {isOpen && (
        <Lightbox
          mainSrc={images[photoIndex]}
          nextSrc={images[(photoIndex + 1) % images.length]}
          prevSrc={images[(photoIndex + images.length - 1) % images.length]}
          onCloseRequest={() => setIsOpen(false)}
          onMovePrevRequest={() =>
            setPhotoIndex((photoIndex + images.length - 1) % images.length)
          }
          onMoveNextRequest={() =>
            setPhotoIndex((photoIndex + 1) % images.length)
          }
        />
      )}
    </div>
  );
}

实现视频预览

对于视频预览，可以使用HTML5的video标签结合模态框实现：

import React, { useState } from 'react';
import Modal from 'react-modal';

Modal.setAppElement('#root');

function VideoPreview() {
  const [modalIsOpen, setModalIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setModalIsOpen(true)}>
        Play Video
      </button>

      <Modal
        isOpen={modalIsOpen}
        onRequestClose={() => setModalIsOpen(false)}
        contentLabel="Video Preview"
      >
        <video width="100%" controls>
          <source src="video.mp4" type="video/mp4" />
          Your browser does not support the video tag.
        </video>
        <button onClick={() => setModalIsOpen(false)}>Close</button>
      </Modal>
    </div>
  );
}

自定义预览组件

如果需要完全自定义的预览功能，可以创建自己的组件：

import React, { useState } from 'react';

function MediaPreview({ type, src }) {
  const [isPreviewOpen, setIsPreviewOpen] = useState(false);

  return (
    <div>
      {type === 'image' ? (
        <img 
          src={src} 
          alt="Preview" 
          onClick={() => setIsPreviewOpen(true)}
          style={{ cursor: 'pointer', maxWidth: '200px' }}
        />
      ) : (
        <div onClick={() => setIsPreviewOpen(true)}>
          <video 
            src={src} 
            style={{ maxWidth: '200px', cursor: 'pointer' }}
          />
          <div>Click to play</div>
        </div>
      )}

      {isPreviewOpen && (
        <div className="preview-overlay">
          <div className="preview-content">
            <button onClick={() => setIsPreviewOpen(false)}>X</button>
            {type === 'image' ? (
              <img src={src} alt="Full Preview" />
            ) : (
              <video src={src} controls autoPlay />
            )}
          </div>
        </div>
      )}
    </div>
  );
}

使用react-player处理视频

对于更复杂的视频需求，可以使用react-player库：

安装依赖：

npm install react-player

使用示例：

import React, { useState } from 'react';
import ReactPlayer from 'react-player';
import Modal from 'react-modal';

Modal.setAppElement('#root');

function VideoPlayer() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Play Video</button>

      <Modal
        isOpen={isOpen}
        onRequestClose={() => setIsOpen(false)}
      >
        <ReactPlayer
          url="https://example.com/video.mp4"
          controls
          width="100%"
          height="100%"
        />
        <button onClick={() => setIsOpen(false)}>Close</button>
      </Modal>
    </div>
  );
}

这些方法提供了不同级别的功能，可以根据项目需求选择合适的实现方式。