Invalid src prop in Nextjs Image tag [duplicate]

Question

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

The error is :

How do I solve ?

Answer 1

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 :

1. Create a next.config.js file inside your root directory.
2. 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