React JS canvas getImageData 来自本地图像显示 404 not found 错误

问：

我想从项目文件中这些小 png 图像中的所有像素中获取 alpha 通道数据。但目前，我只是在做一个控制台.log，看看我是否可以真正读取getImageData的结果。问题是我无法通过加载图像，因为有一个错误：

“localhost：3000/assets/presets_library/layout_presets/cat.png 404（未找到）”

我不确定图像的 src 是否不正确，或者我是否遗漏了其他内容。

下面是 handleSubmit 事件处理函数的样子：

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'])
        }
    }

我什至设置了一个useRef钩子：

const canvasRef = useRef(null);

...

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

)

我不确定可能出了什么问题，但如果您有任何建议，请告诉我。

谢谢