Next.Js Image Component does not load image on localhost

user_14203412 0
Viewed 1499

I have setup the image domain on next.config.js but the image does not show on localhost. However image is loaded on vercel when code is pushed to production.

On localhost I get the following picture below. Image does not load.

enter image description here

On production, image can be seen

enter image description here

What should I do so that I can see the image on development?

module.exports = {
    images: {
        domains: [ 'd31wtm2rx76rut.cloudfront.net'],
    },
}

<NextImage
    src=https://d31wtm2rx76rut.cloudfront.net/1604303981874
    alt="Khanna"
    layout="fill" />
nextjs-image next.js
2 Answers

  1. not sure about old nextjs versions but now image component in nextjs are like:

    import Image from 'next/image'

    <Image
src="https://d31wtm2rx76rut.cloudfront.net/1604303981874"
alt="Khanna"
layout="fill" />

exports are correct. hope it works :)

though a quick fix can be adding unoptimized={true} props to image component (not recommended for production builds)

for more info check here Nextjs Image Doc

user_126437460

For localhost, it works perfectly by adding things in next.config.js. After that restart the server.

module.exports = {
  images: {
    domains: ['localhost']
  }
}
user_123711170
Related