reactjsimagenext.jsnextjs-image

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`

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.

Solution

  • 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