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

Yes, I finally got the answer. Make loader function to load it from the destination of the image.

const myLoader=({src})=>{
  return `${API}/user/photo/${blog.postedBy.username}`;
}

Use this loader function the loader attribute of an Image tag.

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

This works for me perfectly