React_Display Image from server side into Client

Question

I have a code that allows me to send files to server folder uploads using multer from react client side the process of sending data to server works perfectly and also getting back the file from server works perfectly.

The client side is running under 3000 and the server is running under 4000 .

the problem that I'm facing right now is displaying the file on the front part for ex an img

 <img
            src={`http:\\localhost:4000\\server\\${text}`}
            className="messageText colorWhite"
            alt="img"
          />

the image of the error is below

the text contains uploads/image1.jpg

when I inspect the content I found this

which mean that the image is well called from server side

Could it be possible to help me on this?

Best Regards,

"http:/..." isnt a valid URL. should be: "http://..." Also URLs should have '/' not '\' slashes. — poeticGeek
– poeticGeek, Commented Nov 8, 2020 at 13:49

Shree Charan · Accepted Answer · 2020-11-08 03:20:01Z

1

The upload folder which contains the files is not being served up by the server at localhost:4000. You must server the files in the uploads folder first. For eg in an express server you can access the files by specifying this route

app.get('/uploads/:filename', (req, res) => {
res.sendFile(req.params.filename, {root: path.join(__dirname, '/uploads')});
})

Now setting src=http://localhost:4000\uploads\img.png would get the image img.png stored in the uploads folder

edited Nov 8, 2020 at 3:20

answered Nov 7, 2020 at 17:45

Shree Charan

5735 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Nodegeek Over a year ago

As per your solution if I copy the url from the <img src=url in browser => it is getting the file from server side but when I refresh the page without touching the element img i get the same result nothing is showing

Shree Charan Over a year ago

Sorry i couldn't get you

Nodegeek Over a year ago

I tested ur solution => When I write into browser localhost:4000\uploads\img.jpg it works and it get the image as I wanted from server but the problem That inside that component <img> the result is the same nothing is shown

Nodegeek Over a year ago

I accepted this answer and I will carry on with my search I think there is something with the front

Shree Charan Over a year ago

I think there's a typo after http, ive corrected it, that should work. http:// is the right way and not http\

Shree Charan · Accepted Answer · 2020-11-07 18:15:05Z

0

As an alternative solution, you can server up the entire uploads folder by

app.use(express.static("uploads"));

Make sure you specify the full path in "uploads"

answered Nov 7, 2020 at 18:15

Shree Charan

5735 silver badges8 bronze badges

2 Comments

Nodegeek Over a year ago

I also tested it app.use(express.static("./uploads")); but same thing nothing is shown ibb.co/C0B78wv

Nodegeek Over a year ago

did u understand what I'm trying to say

Collectives™ on Stack Overflow

React_Display Image from server side into Client

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related