Estaba escribiendo un código para crear un generador de certificados usando React. Mi enfoque es ingresar el nombre del usuario y se dibuja sobre la plantilla de certificado usando HTML Canvas. El problema que encuentro es que la imagen nunca se carga si uso una imagen del directorio local. Sin embargo, cuando uso un enlace para Image src como Lorem Picsum, la imagen se carga. Aquí está el código que escribí

 function Canvas(){ const canvasRef = useRef(null); useEffect(()=> { const canvas = canvasRef.current; const ctx = canvas.getContext('2d'); let imgUrl = {CertificateTemplate} const image = new Image(); image.crossOrigin = "Anonymous"; image.src = imgUrl; image.onload = function() { ctx.drawImage(image, 0, 0); ctx.font = "54px Norwester" ctx.fillText("Your Name", 210, 75) } image.onerror = function(err) { console.log("err", err); }; }) return ( <> <canvas ref={canvasRef} height={1024} width={512} style={{border: '1px solid black'}}/> </> ); }

Aquí está mi declaración de importación para la imagen.

 import CertificateTemplate from "../images/certificate-template.png";

¡Gracias por adelantado!