title: draw image of canvas working with db image src but not with local images
body: <p>I am trying to load a image onto canvas, my code works fine when i input <code>image.src=&quot;https://somelink&quot;</code> but throws a GET error when i try to import using <code>image.src=&quot;../public/vercel.svg</code>. my code :</p>
  <pre><code>import React, { useRef, useEffect, useState } from &quot;react&quot;;
  
  
  const Canvas = (props) =&gt; {
      const canvasRef = useRef(null)
      useEffect(() =&gt; {
          // load image
          const image = new Image()
          image.src = &quot;https://i.ibb.co/sFVCGfd/map.png&quot;
          
          const canvas = canvasRef.current
          const context = canvas.getContext('2d')
          // our first draw
          context.fillStyle = &quot;#000000&quot;
          context.fillRect(0, 0, context.canvas.width, context.canvas.height)
          console.log(image)
         
          image.onload = () =&gt; {
              context.drawImage(image, 0, 0)
          }
      }, [])
      return &lt;canvas ref={canvasRef} {...props} width={288} height={480} /&gt;
  }
  
  export default Canvas
  
  </code></pre>
  <p>is there any way to get around this?</p>