图片预览功能

一、实现代码

//  仅展示预览图片相关部分代码
//  在state里面添加Modal是否可见的标识
class InformationForm extends PureComponent {
  constructor(props) {
    super(props);
    this.state= {
      pictureModal:false,
    }
  }

//  关闭modal
 closePictureModal = () => {
    this.setState({
      pictureModal:false,
    })
  }

//弹出modal
  previewPicture = () => {
    this.setState({
      pictureModal:true,
    })
  }



render() {
  const {pictureModal}=this.state;
    const {EmployeeManagementModel:{caregiverDetail={},imageUrls}}= this.props;
   return(
         <Descriptions bordered>
          <Descriptions.Item label="工号">{caregiverDetail.workNumber}</Descriptions.Item>
          <Descriptions.Item label="姓名">{caregiverDetail.name}</Descriptions.Item>
          <Descriptions.Item label="个人照片">{
            <>
              {caregiverDetail.imageUrl && ( // 如果caregiverDetail.imageUrl不为空，则显示个人照片部分
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
                  <div style={{ position: 'relative' }}>
                    <img src={imageUrls[caregiverDetail.imageUrl]} alt="img" style={{ width: '50%' }} />
                    <Icon
                      type="eye"
                      style={{
                      position: 'absolute',
                      top: '50%', left: '25%',
                      transform: 'translate(-50%, -50%)',
                      fontSize: '24px',
                      cursor: 'pointer' }}
                      onClick={() => this.previewPicture()}
                    />
                  </div>
                </div>
              )}
            </>
          }
          </Descriptions.Item>
        </Descriptions>
// 放预览图片的modal 点击图片后弹出
        <Modal
          visible={pictureModal}
          footer={null}
          onCancel={this.closePictureModal}
          destroyOnClose
        >
          <img src={imageUrls[caregiverDetail.imageUrl]} alt="img" style={{ width: '100%' }} />
        </Modal>
)
}

export default InformationForm;

二、效果展示

点击图标前：

点击图标后：