使用 `react-viewer` 实现大图预览教程

最新推荐文章于 2025-04-21 20:00:07 发布

祝轩驰

最新推荐文章于 2025-04-21 20:00:07 发布

阅读量1.2k

点赞数 13

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00115/article/details/141043905

使用 `react-viewer` 实现大图预览教程

项目地址:https://gitcode.com/gh_mirrors/re/react-viewer

1. 项目介绍

react-viewer 是一个基于 Viewer.js 封装的 React 组件，它允许你在你的 React 应用程序中轻松实现大图预览功能，支持图片的旋转、缩放和其他交互操作。该项目由 infeng 开发并维护，可在 GitHub 上找到源码和最新的更新：https://github.com/infeng/react-viewer.git

2. 项目快速启动

安装

首先确保你已经安装了 Node.js 和 npm。然后，在你的项目中使用下面的命令安装 react-viewer：

npm install react-viewer

示例用法

在你的 React 组件中导入 react-viewer 并进行使用：

import React, { useState } from 'react';
import Viewer from 'react-viewer';

const MyComponent = () => {
  const [visible, setVisible] = useState(false);
  
  const images = [
    { src: 'path/to/your/image.jpg', alt: 'Image 1' },
    // Add more images as needed...
  ];

  return (
    <>
      <button onClick={() => setVisible(true)}>Preview Image</button>
      {visible && (
        <Viewer
          onClose={() => setVisible(false)}
          images={images}
        />
      )}
    </>
  );
};

export default MyComponent;

这会在按钮点击时打开图片预览窗口。