Javascript 在 Next.js 中使用画布 drawImage 会引发错误

我试图将本 map 像加载到canvas元素，但它抛出了一个错误:

未能在"CanvasRenderingContext2D"上执行"drawImage":

当我用画布窗口画画或做一些事情时，它工作得很好，但当我try 使用image = Image(gImage.default)导入图像时，它会中断吗？我试着遵循为react on Next制作的教程.js，是因为它吗？

我的代码:

import React, { useRef, useEffect, useState } from "react";
import Image from "next/image";

const Canvas = (props) => {
    const canvasRef = useRef(null)
    // load image
    const gImage = require("../public/map.png")
    const image = Image(gImage.default)
    useEffect(() => {
        const someTry = () => {
        }
        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)
        someTry()

        // const mapImage = document.createElement('img')
        // mapImage.src = '../public/map.png'
        // context.drawImage(image, 0, 0)
        image.onload = () => {
            context.drawImage(image, 0, 0)
        }
    }, [])
    return <canvas ref={canvasRef} {...props} width={288} height={480} />
}

export default Canvas

我以为这和getStaticProps有关，但当我试图从那个里传递图像时，它说Image()方法并没有定义，所以有什么方法可以绕过它吗？为什么会这样？