Nextjs Image component does not work with external URL of image source

Question

I have tried using the image component in Next.js with an external URL as a source but getting an error. I have also updated the next.config.js file as on the Next.js official docs but still, the same error persists.

Here is the error message:

Here is the image component

<Image
src="https://images.unsplash.com/photo-1638913662180-afc4334cf422?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
alt="Coin"
width={500}
height={450}
/>

Here is the next.config.js file:

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

Please help me solve this problem.

Answer 1

Restart the nextjs server each time you change the config file, next.config.js.