using the multer package in a Next.js e-commerce site
Unanswered
Red-cockaded Woodpecker posted this in #help-forum
Red-cockaded WoodpeckerOP
Hello team, I use Multer to upload image files which I then display on the front side in an image gallery.
In the test phase with postman I saved images by putting the absolute path in the URL
My problem is the following, the uploaded images which are physically present on my server are not displayed on the front side, I only retrieve the alts.
By searching in the console, the get requests are indeed status 200 but the photos put with postman are of type byte stream with a size of 300kb and the files added with multer are of type html with a size of 2kb.
I would like to understand why the front does not show me the photos, is it a path problem in the recovery of my image or something else?
If anyone has used Multer before, I would appreciate their help.
In the test phase with postman I saved images by putting the absolute path in the URL
My problem is the following, the uploaded images which are physically present on my server are not displayed on the front side, I only retrieve the alts.
By searching in the console, the get requests are indeed status 200 but the photos put with postman are of type byte stream with a size of 300kb and the files added with multer are of type html with a size of 2kb.
I would like to understand why the front does not show me the photos, is it a path problem in the recovery of my image or something else?
If anyone has used Multer before, I would appreciate their help.
48 Replies
@Red-cockaded Woodpecker Hello team, I use Multer to upload image files which I then display on the front side in an image gallery.
In the test phase with postman I saved images by putting the absolute path in the URL
My problem is the following, the uploaded images which are physically present on my server are not displayed on the front side, I only retrieve the alts.
By searching in the console, the get requests are indeed status 200 but the photos put with postman are of type byte stream with a size of 300kb and the files added with multer are of type html with a size of 2kb.
I would like to understand why the front does not show me the photos, is it a path problem in the recovery of my image or something else?
If anyone has used Multer before, I would appreciate their help.
first of all try to fix that warning , it is not the problem but fix it
instead of
and btw, using
instead of
<img> </img> do <img />and btw, using
<Image /> imported from 'next/image' is much betternow to the real problem:
i think the problem is on the server side where you are not correctly saving the URL
i think the problem is on the server side where you are not correctly saving the URL
@`${ViNoS}` now to the real problem:
i think the problem is on the server side where you are not correctly saving the URL
Red-cockaded WoodpeckerOP
Thank you for your answer. On the server side, I looked at everything is ok, the image saves well in the upload folder and the path is the file name as indicated in the documentation. For my part I think the problem is only front side but where lol
@Red-cockaded Woodpecker Thank you for your answer. On the server side, I looked at everything is ok, the image saves well in the upload folder and the path is the file name as indicated in the documentation. For my part I think the problem is only front side but where lol
ah true, i was looking at the id an i thought it's the url but i didn't see the file extension x)
anyways, you just need to start the path with a slash
anyways, you just need to start the path with a slash
/oh wait no
the data is in the
it should be on the
the data is in the
upload folder ?it should be on the
public folder so that it can be servedRed-cockaded WoodpeckerOP
the uploads folder should be in the public folder is that right?
@Red-cockaded Woodpecker the uploads folder should be in the public folder is that right?
if you want it this way than okay, just then make sure to put the path as:
/uploads/jjodhfaohasdfo.jpgRed-cockaded WoodpeckerOP
I will try again because I have already tried without success.
at least it works this way
the question is, does this works then same way when the server is running
the question is, does this works then same way when the server is running
i don't think so,
so one way of doing this is making a route, that route returns the picture,
so one way of doing this is making a route, that route returns the picture,
Red-cockaded WoodpeckerOP
ok I have an error on the back end side when retrieving the image which is located in my controller when I retrieve the image according to its id
Red-cockaded WoodpeckerOP
@Red-cockaded Woodpecker Click to see attachment
this problem is a problem with mongoDB query
maybe check your route segments
w8 w8 w8 i just noticed 🤦â€â™‚ï¸
i thought your backend is next
you are using seperate backend
maybe check your route segments
w8 w8 w8 i just noticed 🤦â€â™‚ï¸
i thought your backend is next
you are using seperate backend
Red-cockaded WoodpeckerOP
yes my back end and my front are in 2 independent folders
@Red-cockaded Woodpecker yes my back end and my front are in 2 independent folders
the problem is with the routes
Red-cockaded WoodpeckerOP
yes that's what I'm looking at thank you for your help
it's good I got it back the first problem is solved
//const gallerie = await GallerieModel.findById(gallerieId);
const gallerie = await GallerieModel.findOne({ imageGallerie: gallerieId });
const gallerie = await GallerieModel.findOne({ imageGallerie: gallerieId });
this is a new route right ?
Red-cockaded WoodpeckerOP
no, I just modified my search in the controller, I replaced findById with findOne
just add this middleware :
app.use(express.static("uploads"))
and on the frontend it should be :
<img src="locaslhost:5400/whatwver.png" />
app.use(express.static("uploads"))
and on the frontend it should be :
<img src="locaslhost:5400/whatwver.png" />
Red-cockaded WoodpeckerOP
my server.js file : app.use("/uploads", express.static(path.join(__dirname, "uploads")));
i think this should work
Red-cockaded WoodpeckerOP
my app.use has been there since the beginning lol
loool
Red-cockaded WoodpeckerOP
my front end : const test = "http://localhost:5400/uploads/1691830564675.jpeg";
<img src={test}></img>
and it doesn't work ?
Red-cockaded WoodpeckerOP
lol
lmfao
hmmmm, no clue then x)
you go for the solution i said earlier, but i think it's better to find out why this is not working
you go for the solution i said earlier, but i think it's better to find out why this is not working
try to acccess it first directly from the browser without the Next
like paste the url in the url bar
then open the dev tools and see the response
like paste the url in the url bar
then open the dev tools and see the response
@Red-cockaded Woodpecker
Red-cockaded WoodpeckerOP
I will continue to search. I know that the error is only in the recovery on the front end side or I will dig on the back end side to see how it sends the requests and with what. I thank you for your help. Just tell me to know in which country you live? I live in France in Paris
@Red-cockaded Woodpecker I will continue to search. I know that the error is only in the recovery on the front end side or I will dig on the back end side to see how it sends the requests and with what. I thank you for your help. Just tell me to know in which country you live? I live in France in Paris
living just under france , algeria
Red-cockaded WoodpeckerOP
assalam alikum wa rahmatullah wa barakatuhu
merci pour ton aide akhy
Red-cockaded WoodpeckerOP
tu es developpeur web en algerie?
je prefer aller a #off-topic
Red-cockaded WoodpeckerOP
mp