Next Image component throws 404 error in production, works fine in development

Question

I have a bunch of images in a hidden gallery, only shown when a user clicks on a certain button.

On the development server, everything is fine, no errors or issues, but when I deploy my website and open the gallery the images don't show and throw a 404 error in the console (I included the required props).

When I replace the <Image/> component with <img>, everything is fine on the development server and live. Can anyone please help? I searched a lot and I didn't find anything like this issue.

Ministrant

Answer 1

My solution:

I had the same issue and solved it by renaming the image file names.

How the issue arose:

I had renamed the images, only changing uppercase to lowercase letters. This resulted in the files being wrongly named in my github repository. After a rename with new characters, the files were correctly updated on github.

Refuel

Answer 2

Create a folder on root call it 'static' which is bassically /static/imagename.png

Set the source to the image like so;

<img src="/static/imagename.png" />

This should load the static image in file both in dev environment and build file.

Zerk

Answer 3

Image Optimization using Next.js' default loader is not compatible with next export.

Possible solutions:

• Use next start, which starts the Image Optimization API.
• Use Vercel to deploy, which supports Image Optimization.
• Configure a third-party loader in next.config.js.

That means: Only assets that are in the public directory at build time will be served by Next.js. Files added at runtime won't be available

To solve this problem. I just used next-optimized-images for static image and next/image for images from the cloud.

Kindly read this article for more understanding: https://dev.to/jameswallis/next-image-and-next-optimized-images-a-brief-comparison-4c4i

Foreknowledge