Next JS Image Component works for static image files, but dynamic urls fail to load images

Question

I am using NextJS <Image /> component. I am using both local image sources and sources from external API. Everything works in my local development environment, but as soon as I host it on the server to production, dynamic images from API are not showing up.

<Image
  src="house.jpg"   // loaded from local and works fine
  alt="Picture of my house."
  width={250}
  height={250}
/>

The code below works in dev environment, but not in production server.

const renderHouses = (apiHouses) => (
   apiHouses.map(house => (
      <div key={house.id}>
         <Image
           src={house.img}   // not working (loading) on production server
           alt={`Picture of ${house.name}`}
           width={250}
           height={250}
         /> 
      </div>
   ))
)

Ismoil Shokirov · Accepted Answer · 2022-01-01 14:46:38Z

6

Yep, it will work for your localhost, but external images would not be loaded in production env if you don't specify the domain name in your next.config.js file.

module.exports = {
  images: {
    domains: ['localhost','yourDomainName.com'],
  },
};

You can find more info here.

answered Jan 1, 2022 at 14:46

Ismoil Shokirov

3,1294 gold badges24 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Y H R Over a year ago

Yes, and don't forget to restart your Next app for it to be taken into account.

Collectives™ on Stack Overflow

Next JS Image Component works for static image files, but dynamic urls fail to load images

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related