Invalid src prop in Nextjs Image tag

Question

<Image
  src={"http://localhost:3000/images/img.jpeg"}
  layout="fill"
  objectFit="cover"
  width={"100%"}
  height={"100%"}
/>

The error is :

How do I solve ?

Did you try visiting the link inside the error that your image is showing? It contains the solution — casraf, Jun 06 '22 at 12:13
images: { domains: ['localhost'], }, Insert this to your next config in module.exports — CptSosen, Jun 06 '22 at 12:14

score 1 · Accepted Answer · answered Jun 06 '22 at 12:16

The error says that, the url that you are using for the Image is not from a trusted hostname(domain). You just need to add that hostname or domain inside your next.config.js file. Follow the following steps :

Create a next.config.js file inside your root directory.
Add the following code inside your next.config.js file.

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

This must solve your problem. For more details you can read more on this page : next.config.js

Invalid src prop in Nextjs Image tag

1 Answers1