React JS canvas getImageData 从本地图像显示 404 未找到错误

Question

我想从项目文件中这些小 png 图像中的所有像素获取 Alpha 通道数据。但目前，我只是做一个 console.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>
...

)

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

谢谢你

Answer 1

好消息，我发现如果我将所有内容移至公共文件夹并使其可以从项目中的任何位置访问，我不会收到任何错误。