前端学习案例-ant design model实现图片预览

最新推荐文章于 2023-10-19 16:12:17 发布

前端歌谣

最新推荐文章于 2023-10-19 16:12:17 发布

阅读量415

点赞数

文章标签：前端学习 html

本文链接：https://blog.csdn.net/qq_41632427/article/details/126522098

版权

歌谣-前端学习案例-学习专栏收录该内容

49 篇文章 0 订阅

订阅专栏

    <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}
          />

利用model点击是实现数据得展示