Estoy usando reaccionar para mi proyecto y el requisito es obtener una vista ampliada al pasar el mouse y llamar a la función onLoad al cargar img y onError al fallar la carga. Probé varios paquetes pero ninguno me da los dos anteriores simultáneamente.

Aquí están los paquetes que probé.

 import { GlassMagnifier } from "react-image-magnifiers"; { /* This one tried with react-image-magnifiers doesn't give onError event to control if image load fails*/ } export const Image = React.memo(() => { const onLoad = () => { console.log("inside load"); // do some stuff }; const onError = err => { console.log("inside error"); // do some stuff }; return ( <> <span hidden={!loaded}> <GlassMagnifier imageAlt="certificate-preview" imageSrc="https://some-link" className="image" onImageLoad={() => onLoad()} magnifierSize="35%" /> </span> </> ); });

Este probó con react-image-magnify no dio la vista de vidrio esperada

 import ReactImageMagnify from "react-image-magnify"; { /* This one tried with react-image-magnify didn't give expected glass view*/ } export const Image = React.memo(() => { const onLoad = () => { console.log("inside load"); // do some stuff }; const onError = err => { console.log("inside error"); // do some stuff }; const prop = { smallImage: { src, width: 200, height: 300, alt: "certificate-preview", onLoad, onError: err => { console.log("In small 1st err"); onError(err); }, }, largeImage: { src: "https://some-link", width: 100, height: 300, alt: "certificate-preview", onLoad, onError: err => { onError(err); }, }, enlargedImageStyle: { objectFit: "contain", }, }; return ( <> <ReactImageMagnify {...prop} /> </> ); });

Esta es la vista esperada

Puedo estar olvidando algo. Cualquier ayuda sería muy apreciable.