I was writing a code to create a certificate generator using React. My approach is to input the name from the user and it gets drawn over the Certificate template using HTML Canvas. The Problem I am encountering is that the image never loads if I use an image from the local directory. However, when I use a link for the Image src like Lorem Picsum, the image loads. Here is the code I wrote

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'}}/>
        </>
    );
}

Here is my import statement for the image

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

Thanks in advance!