draw image of canvas working with db image src but not with local images

Question

I am trying to load a image onto canvas, my code works fine when i input image.src="https://somelink" but throws a GET error when i try to import using image.src="../public/vercel.svg. my code :

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

is there any way to get around this?

Answer 1

first you must add your web site in next.config.js

 images: {
    formats: ['image/webp'],
    domains: [
      http://i.ibb.co
    ],
  },

for local remove "public"

image.src="/vercel.svg"