是否可以通过按钮打开 antd 图片预览？

Question

我想在 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>
  );
};

我想像上面的代码一样实现它，但找不到任何方法。

编辑：我想control/toggle预览状态的可见性。

Answer 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你可以看看：

是否可以通过按钮打开 antd 图片预览？

Is it possible to open an antd image preview with a button?

javascript

typescript

reactjs

antd