next.jsnextjs-image

Invalid src prop in Nextjs Image tag


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

The error is :

enter image description here

How do I solve ?


Solution

  • 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