Quiero abrir la vista previa de una imagen en antd sin hacer clic en la miniatura de la imagen (por ejemplo, haciendo clic en un botón):
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> ); };Me gustaría implementarlo de manera similar al código anterior, pero no pude encontrar ninguna forma de hacerlo.
Editar: quiero controlar/alternar la visibilidad de la vista previa con un estado.
Puedes hacerlo así:
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> </> ); }También he implementado un ejemplo aquí , puedes comprobarlo: