Next.js Discord

Discord Forum

Failing to load images getting this error in production: 504 (Gateway Timeout)

Unanswered
Japanese littleneck posted this in #help-forum
Open in Discord
Avatar
Japanese littleneckOP
When I run my webapp locally, the images load fine but when I deploy it, the images keep pending and eventually 504 (Gateway Timeout). I am using next js 14, deploying through digital ocean, and hosting on cloudflare. Other images on the home page load just fine. Just these 7 images aren't loading and they all belong to the same component. Any idea how I could fix this issue?

27 Replies

Avatar
Persian
Can you share the source code here?
Avatar
Japanese littleneckOP
the code for the component?
Avatar
Persian
Sure
Avatar
Japanese littleneckOP
Image
Avatar
Persian
The images and FeatureCards component are located in the same folder?
Avatar
Japanese littleneckOP
Nope
the images are located in the public folder
It works in localhost
The issue only arises in prod
Avatar
Persian
import coffee from '/public/emojis/coffee.webp'; export const CoffeeEmoji = () => { return <Image alt='Coffee' src={coffee} ... />; };

update your code in that way and try again
Avatar
Japanese littleneckOP
Ok lemme try this
wait
but I'm checking my home page and I have used this way to create images before:
                            <Image
                                alt="4 year plan screenshot"
                                className="w-full h-auto rounded-lg shadow-lg"
                                src={"/nextstepplandemo.jpg"}
                            />
and it worked
Avatar
Persian
/** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, images: { formats: ['image/webp'], }, }; module.exports = nextConfig;

try adding to the above code to your next.config.js file
Avatar
Japanese littleneckOP
wait does this work if my other images aren't necessarily in webp format?
Avatar
Persian
no worries
Avatar
Japanese littleneckOP
ok bet
It might also be like a CPU issue
Im deploying through digital ocean and I noticed that the website lags
There's like a huge CPU spike too
Avatar
Persian
have you ever tried it on vercel?
Avatar
Japanese littleneckOP
Nope
Does the image impact the CPU usage?
Avatar
Persian
Sure, especially if its not optimized
high resolution images require more resources to load and render, which can lead to increased CPU usage
Avatar
Japanese littleneckOP
I switched to webp to try to optimize it but ig it still doesn't work well.