【总结】antd Image 组件

Dream_Ji

于 2024-08-23 18:02:07 发布

阅读量401

点赞数 3

文章标签： java 前端 javascript

本文链接：https://blog.csdn.net/weixin_48958486/article/details/141471953

版权

<Image
  alt=""
  src={video.guide_item_image}
  preview={{
    imageRender: () => (
      <Modal open={visible} footer={null} closable={false} width="80%" centered>
        <iframe
          src={videoUrl}
          allowFullScreen
          style={{ width: '100%', height: '600px', border: 'none' }}
         />
      </Modal>
     ),
      mask: (
        <div className="custom-preview-icon">
          <PlayCircleOutlined style={{ fontSize: '36px', color: '#fff' }} />
        </div>
      ),
      onVisibleChange: () => handlePreview(video.guide_item_code),
      destroyOnClose: true,
      toolbarRender: () => null,
  }}
/>

其中，mask 把原本的预览图标改为播放图标。