可以用按钮打开antd图片预览吗？

Posted 2023-02-18

【中文标题】可以用按钮打开antd图片预览吗？

【英文标题】：Is it possible to open an antd image preview with a button?

【发布时间】：2022-01-19 16:21:07

【问题描述】：

我想在 antd 中打开图像的预览而不点击图像缩略图本身（例如通过点击按钮）：

import React from 'react';
import Image, Button from 'antd';

const Foo: React.Fc<any> = (props) => 

const [isPreviewVisible,setPreviewVisible] = useState<boolean>(false);

return (
  <div>
       <Image 
        // something like this 
        // isPreviewVisible=isPreviewVisible 
        src="some url"
       />
       <Button onClick=()=>setState(!isPreviewVisible)>Click me!</Button>
  </div>
  );
;

我想实现它类似于上面的代码，但找不到任何方法。

编辑：我想控制/切换带有状态的预览的可见性。

【问题讨论】：

像一个工具提示？

不完全，但类似。我试图使用 antd 本身的图像组件已经存在的预览功能，但是以一种更“可控”的方式。在我的示例中，我想通过状态控制预览的可见性。

【参考方案1】：

你可以这样做：

function ImageDemo() 
  const [isPreviewVisible, setPreviewVisible] = useState(false);
  return (
    <>
      <Image
        width=200
        preview=
          visible: isPreviewVisible,
          onVisibleChange: (visible, prevVisible) => setPreviewVisible(visible),
        
        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
      />
      <Button onClick=() => setPreviewVisible(!isPreviewVisible)>
        Click me
      </Button>
    </>
  );

我还实现了一个例子here你可以看看：