Images does not show in Production
Answered
African Slender-snouted Crocodil… posted this in #help-forum
African Slender-snouted CrocodileOP
Hi there
I am creating an app in next-js version 14 it is an ecommerce store
I created a dashboard with product upload functionality it works properly as it should in development mode
But in product when i upload a product and return to product review section, the images does not show specifically new uploaded product images
It just happens in production it says the image resource is not valid
when i rebuild app then it resolves the issue related to that product
Here is the app with same functionality but it also does not work for me
Please help me with solving this issue
I will provide example code that i created.
I am creating an app in next-js version 14 it is an ecommerce store
I created a dashboard with product upload functionality it works properly as it should in development mode
But in product when i upload a product and return to product review section, the images does not show specifically new uploaded product images
It just happens in production it says the image resource is not valid
when i rebuild app then it resolves the issue related to that product
Here is the app with same functionality but it also does not work for me
Please help me with solving this issue
I will provide example code that i created.
Answered by Sun bear
I think after running npm build it does not expect that there are new images saved in public.
I would recommend to use uploadthing, s3 or similar to store images
I would recommend to use uploadthing, s3 or similar to store images
7 Replies
Sun bear
Hi, saving an image in /public via upload on your server will override it with every deployment so its not recommended.
E.g. you upload 10 images via ui in /public then when you do the next deployment they will be gone.
Maybe thats also causing the error.
And you could make your showImages component a server component then you dont need the use effect part.
E.g. you upload 10 images via ui in /public then when you do the next deployment they will be gone.
Maybe thats also causing the error.
And you could make your showImages component a server component then you dont need the use effect part.
African Slender-snouted CrocodileOP
Thank you for addressing the public directory issue that it will be overwritten this will help me in future.
But in this case when i upload image in development mode that images work fine they got uploaded and be shown in the same session on just reload.
But when I take my app to production like build with "npm run build " after running the app start with "npm start"
when i upload same image it gets uploaded and saved in public directory with path in database but the image does not appear with all other images, it says image resource is not valid, when i stop and rebuild app it then the image uploaded in previous build shows now but no the new ones
But in this case when i upload image in development mode that images work fine they got uploaded and be shown in the same session on just reload.
But when I take my app to production like build with "npm run build " after running the app start with "npm start"
when i upload same image it gets uploaded and saved in public directory with path in database but the image does not appear with all other images, it says image resource is not valid, when i stop and rebuild app it then the image uploaded in previous build shows now but no the new ones
African Slender-snouted CrocodileOP
Making this a server component may resolve issue for this specific component but not for others where data should be updated dynamically.
Sun bear
Do you mean with "in development" in local development?
Sun bear
I think after running npm build it does not expect that there are new images saved in public.
I would recommend to use uploadthing, s3 or similar to store images
I would recommend to use uploadthing, s3 or similar to store images
Answer
African Slender-snouted CrocodileOP
Ok i will try it and will inform you about results
African Slender-snouted CrocodileOP
Hey thanks alot!
It just solved my issue i tried uploadthings to add it worked
You were right public directory is for only static assets not for uploaded on runtime
It just solved my issue i tried uploadthings to add it worked
You were right public directory is for only static assets not for uploaded on runtime