The issue with Next.js Image not working on the server but working fine on localhost has been puzzling me.
My assumption was that it could be related to permissions, as I fetch images from a third-party domain. However, when I load images using a regular img tag, they display correctly both on the server and localhost.
The process involves fetching images of machines and their specifications from the domain side and storing them in my database. These images are then displayed using the Image component, with the sizes attribute applied due to their large size.
I am confused about the root cause of the problem. It seems like I might need to configure image reception from external servers somewhere other than next.config. But it's perplexing how a character image loads fine using a regular img tag.
I found some information here: https://nextjs.org/docs/pages/api-reference/components/image-legacy#remote-patterns
My deployment configuration: Node + Next.js/Prisma
While Next.js Image works on localhost, on the server I encounter this issue: https://i.stack.imgur.com/ziCIn.png
Network https://i.stack.imgur.com/LMTsm.png
<Image
src={car.picture[0]}
alt={car.picture[0]}
layout="fill"
sizes="(max-width: 750px) 50vw,
(max-width: 828px) 40vw,
(max-width: 1080px) 33vw,
20vw"
loading="lazy"
/>
On the other hand, the standard <img> tag functions properly on both server and localhost, producing amazing image sizes:
<img
loading="lazy"
decoding='async'
src={car.picture[0]}
className="cardImg">
</img>
I tried adding the third-party domain with images in next.config.js :
const nextConfig = {
reactStrictMode: true,
};
module.exports = {
...nextConfig,
images: {
domains: ['mydomaineImg.com'],
},
};
After updating to Next.js version 12.3.4, my new next config :
const text Config = {
react StrictMode: true,
ignore Build Errors: true,
ignore During Builds: true,
}
module.exports = {
......next Config,
images: {
remote Patterns: [
{
protocol: 'https',
hostname: 'mydomaineImg.com',
},
],
},
};