ant design model实现图片预览

代码部分

    <div
          gutter={16}
          style={{
            width: '100%',
            display: 'flex',
            justifyContent: 'space-between',
            flexWrap: 'wrap ',
          }}
        >
          {detailMsg.imgList &&
            detailMsg.imgList.map((item, index) => (
              <div style={{ width: '30%' }} key={index} onClick={() => this.handleClick(item)}>
                <img style={{ display: 'block', width: '100%' }} src={item} />
              </div>
            ))}
        </div>
        <Modal
          visible={visible}
          footer={null}
          onCancel={() =>
            this.setState({
              visible: false,
            })
          }
        >
               
          <img
            style={{
              width: 476,
            }}
            src={imgUrl}
          />

演示效果