Next.js Image component not showing image and yarn dev server quitting with error

Question

I am trying to render an illustration with the following path /public/illustrations/free_mode.jpg, but for some reason when I navigate to the page where the image is supposed to be rendered the image is not found and yarn dev command exit with code 137. When I checked .next folder I've found all the other images in the cache except for the one causing the error. My code is the following:

<Image
    src="/illustrations/free_mode.jpg"
    alt="illustration"
    width={300} height={300}
    className="w-full h-9 md:h-auto md:w-48 md:rounded-none md:rounded-l-lg"
/>

It worked well for other images but when I added this one it doesn't the app server crashed.

Answer 1

To use a local image, import your .jpg, .png, or .webp files:

import freeMode from './illustrations/free_mode.jpg'

<Image
    src={freeMode}
    alt="illustration"
    width={300} height={300}
    className="w-full h-9 md:h-auto md:w-48 md:rounded-none md:rounded-l-lg"
/>