NextJS Image component incorrect path

user_2093676 0
Viewed 534

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!

nextjs-image next.js reactjs image
1 Answers

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

user_53134290
Related