GtDigManageWeb/src/components/PreviewFile/index.js

import React from 'react';
import ReactZmage from 'react-zmage';
import './index.less';

export default function PreviewFile(props) {
  const { src, name, showName } = props;
  var reg = /\.(png|jpg|gif|jpeg|webp)$/;
  const controller = {
    // 关闭按钮
    close: true,
    // 旋转按钮
    rotate: true,
    // 缩放按钮
    zoom: false,
    // 下载按钮
    download: false,
    // 翻页按钮
    flip: false,
    // 多页指示
    pagination: false,
  };

  if (reg.test(name)) {
    if (showName) {
      return (
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <ReactZmage
            controller={controller}
            backdrop="rgba(255,255,255,0.5)"
            style={{ width: '100px' }}
            src={src}
          />
          <div style={{ marginLeft: 20 }}>{name}</div>
        </div>
      );
    } else {
      return (
        <ReactZmage
          controller={controller}
          backdrop="rgba(255,255,255,0.5)"
          style={{ width: '100px' }}
          src={src}
        />
      );
    }
  } else {
    return <div>{name}</div>;
  }
}