ant design model实现图片预览

Posted 2021-12-06 前端小歌谣

代码部分

    <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=