前端学习案例-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}
/>

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

文章来源于互联网:前端学习案例-ant design model实现图片预览

THE END
分享
二维码