Next.js Discord

Discord Forum

My uploaded images are not displayed, I receive a 404 error

Unanswered
Netherland Dwarf posted this in #help-forum
Open in Discord
Netherland DwarfOP
I created a web application with next js using prisma and MySQL for the database. Locally the image upload goes well and when I want to retrieve the image file by <Image src={image.imageUrl} /> it displays well but once the application is built and a user adds a new image it is stored in the public file and in the database but I receive a 404 error on the image, I still have to rebuild the application so that the stored image can be displayed, I tried all the methods I could find in the forums but nothing solved the problem

2 Replies

@Netherland Dwarf I created a web application with next js using prisma and MySQL for the database. Locally the image upload goes well and when I want to retrieve the image file by <Image src={image.imageUrl} /> it displays well but once the application is built and a user adds a new image it is stored in the public file and in the database but I receive a 404 error on the image, I still have to rebuild the application so that the stored image can be displayed, I tried all the methods I could find in the forums but nothing solved the problem
you can dynamically update your link depending on where your image is hosted. Normally you have something like a CDN that serves your images. So you can add for exmaple process.env.NEXT_PUBLIC_CDN_URL (or something similar) and add the expected storage key to it:
const imageUrl = process.env.NEXT_PUBLIC_CDN_URL + storageKey;

Like that you can dynamically display the expected content and of course instantly as well
@Netherland Dwarf solved?