Got an error Invalid src prop ('here is a link') on `next/image`, hostname "localhost" is not configured under images in your `next.config.js`

Question

I am using the Image component from Next.js (it's a new feature of Next.js). I've tried to give the source URL:

{`${API}/user/photo/${blog.postedBy.username}`}

But it shows me this error. I also make changes in my next.config.js as

module.exports = {
    images: {
      domains: ['localhost'],
    },
  }

but nothing works for me. Please help if you know anything about this.

Answer 1

const src = `${API}/user/photo/${blog.postedBy.username}`;
    
<Image loader={() => src} src={src} width={500} height={500}/>

Here, loader is a function that generates the URLs for your image. It appends a root domain to your provided src, and generates multiple URLs to request the image at different sizes. These multiple URLs are used in the automatic srcset generation, so that visitors to your site will be served an image that is the right size for their viewport.

Answer 2

I had the same issue, You need to restart your dev server, you need to do that each time you make changes on your next.config.js file.

The API string should include the port. e.g. localhost:3001

Answer 3

Edit next.config.js :

module.exports = {
  reactStrictMode: true,
  images: {
    domains: ['example.com'],
  },
}

Answer 4

First of all add and restart the dev server.

domains: ['localhost']

And be sure to return the image link with http(s) protocole

image link with localhost:port/... is wrong , return as http://localhost/... ( or with https )