ant-design图片组件image默认预览大图状态显示ice并隐藏底图过年春节贺卡

lumengabc

于 2025-01-23 13:51:48 发布

阅读量214

点赞数 3

CC 4.0 BY-SA版权

文章标签：前端 javascript html

本文链接：https://blog.youkuaiyun.com/webnoties/article/details/145322261

在节日或活动日时需要打开页面时显示促销图片贺卡时，非常方便

{[2, 3, 4, 5].includes(companyId) && (
        <Image
          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" // 1px大小，即隐藏底图
          preview={{
            visible: previewVisible, // 控制预览对话框的显示状态
            src: 'https://1.jpg', // 自定义预览图片的源
            forceRender: true, // 强制渲染预览对话框
            maskClosable: true, // 允许点击遮罩层关闭预览
            onVisibleChange: (visible) => {
              setPreviewVisible(visible); // 更新状态变量
            },
          }}
        />
      )}

结束