我正在尝试将图像加载到画布上，当我输入时我的代码工作正常，image.src="https://somelink"但当我尝试使用导入时抛出 GET 错误image.src="../public/vercel.svg。我的代码：

import React, { useRef, useEffect, useState } from "react";


const Canvas = (props) => {
    const canvasRef = useRef(null)
    useEffect(() => {
        // load image
        const image = new Image()
        image.src = "https://i.ibb.co/sFVCGfd/map.png"

        const canvas = canvasRef.current
        const context = canvas.getContext('2d')
        // our first draw
        context.fillStyle = "#000000"
        context.fillRect(0, 0, context.canvas.width, context.canvas.height)
        console.log(image)

        image.onload = () => {
            context.drawImage(image, 0, 0)
        }
    }, [])
    return <canvas ref={canvasRef} {...props} width={288} height={480} />
}

export default Canvas

有什么办法可以解决这个问题吗？