React JS canvas getImageData from local image shows 404 not found error

Question

I would like to get the alpha channel data from all the pixels in these small png images that are within the project's files. But for the moment, I am just doing a console.log to see if I can actually read the results of getImageData. The problem is that I am unable to move past loading the image, because there is an error:

"localhost:3000/assets/presets_library/layout_presets/cat.png 404 (Not Found)"

I am unsure if the src of the image is incorrect, or if there is something else I am missing.

Here is what the handleSubmit event handler function looks like:

function handleSubmit(event) {
        event.preventDefault();

        if (presetLayouts.length > 0) {

            for (let presetIndex = 0; presetIndex < presetLayouts.length; presetIndex++) {

                let img = new Image();
                img.src = presetLayouts[presetIndex];
                let ctx = canvasRef.current.getContext('2d')
                let imageData;

                img.onload = function () {
                    ctx.drawImage(img, 0, 0);
                    console.log(ctx)
                    imageData = ctx.getImageData(0, 0, 250, 250);
                    console.log(imageData);
                }
            }

        }

        if (importLayouts.length > 0) {
            ...
        }

        if (drawLayouts.length > 0) {
            ...
        }

        if (convertedLayouts.length === 0) {
            setLayoutShapes(['default'])
        }
    }

I even set up a useRef hook:

const canvasRef = useRef(null);

...

return (
        <form onSubmit={handleSubmit}>
            <canvas id="layout-canvas" ref={canvasRef}></canvas>
...

)

I am not sure what might have went wrong, but if you have any suggestions, please let me know.

Thank you

Answer 1

Good news, I found that if I moved everything over to the public folder and made it accessible from anywhere in the project, I don't get any errors.