react 实现图片预览功能 RcViewer

react 项目通过使用 RcViewer 实现图片预览功能

效果图

1.安装依赖包

npm i @hanyk/rc-viewer

2.因为预览功能会多个地方使用，我们直接定义成组件

预览组件代码

import React, { Component } from 'react';
import RcViewer from '@hanyk/rc-viewer';

class ImageViewer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      imageStatus: false,
    };
  }

  handleImageFailed = () => {
    this.setState({imageStatus: false});
  }

  handleImageLoaded = () => {
    this.setState({imageStatus: true});
  }

  render() {
    const toolbarHide = {
      show: false,
    };
    const toobbarShow = {
      show: true,
      size: 'large',
    };
    const options = {
      title: false, //图片名称
      navbar: false, //缩略图
      fullscreen: false, //全屏播放
      loop: false, //是否循环 上一个 下一个
      loading: false,
      button: true, //
      tooltip: true, //缩放百分比
      movable: true, //图片移动
      toolbar: {
        zoomIn: toobbarShow, //放大
        zoomOut: toobbarShow, //缩小
        oneToOne: toolbarHide, //自适应
        reset: toobbarShow, //重置
        prev: toolbarHide, //上一张
        play: toolbarHide, //播放
        next: toolbarHide, //下一张
        rotateLeft: toolbarHide, //左旋转
        rotateRight: toolbarHide, //右旋转
        flipHorizontal: toolbarHide, //左右翻转
        flipVertical: toolbarHide, //上下翻转
      },
    };
    if (this.state.imageStatus) {
      return (
        <RcViewer options={options}>
          <img {...this.props}
            title={''}
            style={{
              cursor: 'pointer',
            }} />
        </RcViewer>
      );
    }
    return (
      <img {...this.props}
        onError={() => this.handleImageFailed()}
        onLoad={() => this.handleImageLoaded()} />
    );
  }
}

export default ImageViewer;

3.父组件直接引用

import ImageViewer from '@/components/ImageViewer';
 <ImageViewer  src={this.state.resDetails.summaryImage} />