一、图片查看器viewer

官网
案例
接口

• 每个id不一样
• 注意销毁

示例

import React from 'react';
import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';
import './index.less';

let viewer = '';
class ImageView extends React.PureComponent {
  componentDidMount() {
    const { id } = this.props;
    if (id) {
      viewer = new Viewer(document.getElementById(id), {
        url: 'data-original',
        toolbar: {
          zoomOut: true,
          reset: true,
          zoomIn: true,
        },
      });
    }
  }

  componentWillUnmount() {
    if (viewer) {
      viewer.destroy();
    }
  }

  render() {
    const { src, id } = this.props;
    return (
      <div>
        <img id={id} src={src} alt="Picture" className="ImageView" />
      </div>
    );
  }
}

export default ImageView;