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?

You cannot access the server's file system from inside the browser. Use `import Vercel from "../public/vercel.svg";` then `image.src = Vercel;` (it might work differently for Next though) — , Jul 25 '22 at 12:00

score 0 · Accepted Answer · answered Jul 25 '22 at 12:27

0

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"

answered Jul 25 '22 at 12:27

H9ee

277
2
9

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

1 Answers1