ant design model实现图片预览

最新推荐文章于 2024-12-02 13:25:36 发布

前端小歌谣

最新推荐文章于 2024-12-02 13:25:36 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： css3 css javascript

本文链接：https://blog.csdn.net/weixin_43392489/article/details/121144763

本文介绍了如何使用Ant Design库中的Model组件来实现图片的预览功能，包括相关CSS3和JavaScript代码的实现细节，并提供了实际的演示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码部分

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