NextJS Image component incorrect path

Question

I'm working on a NextJS application and I'm having trouble getting the Image component to work.

The normal img element works fine using the same src attribute path as the Image component.

My project has the standard public folder and inside it I have an image called nageldog.png

import Image from "next/image";
...
<img src="/nageldog.png" alt="a"/>
<Image src="/nageldog.png" alt="b" width="64" height="64" />
...

In the browser console

---

the src path generated for the <img> element looks fine:

<img src="/nageldog.png" alt="a">

---

the src path generated for the <Image> component looks odd:

<img alt="b" src="/_next/image?url=%2Fnageldog.png&amp;w=256&amp;q=75"

---

I receive an error in console: "Failed to load resource... status 500" for http://localhost:3000/_next/image?url=%2Fnageldog.png&w=64&q=75

Why won't the Image component load? Thanks!

Answer 1

you can import static images like this

import Image from 'next/image'
import mypic from '../nageldog.png'

const MyImage = (props) => {
  return (
    <Image src={mypic} alt="Picture of the author" />
  )

the problem i have with is when having a lot of images in the public folder

Answer 2

use loader attribute.

<Image src={iconSrc} loader={() => item.iconSrc} alt="Picture of the author" />