How can I get images in react from nodeJS API server

Question

I need to show an image that I uploaded in the node server, I can access the image in the server because I put the file public but I dont know how can import the image in react because when I try to import in a usual way like

<img src={process.env.PUBLIC_URL + "../../../../../api/uploads/1570230561283padre-e-hija.jpg"} style={imgStyle}/>

the response from the server is 404 not found. So how can I fix this?

Thanks :)

You're probably going to want to look into serving this image file (or images) statically with the built in methods from Express. <expressjs.com/en/starter/static-files.html> — DJ2
– DJ2, Commented Dec 5, 2019 at 16:16

Sandeep Patel · Accepted Answer · 2019-12-05 21:00:43Z

1

It's better to use express.static function to serve static content

//in nodejs

    app.use(express.static('pathToUploadFolder'))

//react js

    <img src="/1570230561283padre-e-hija.jpg" style={imgStyle}/>

edited Dec 5, 2019 at 21:00

answered Dec 5, 2019 at 16:49

Sandeep Patel

5,1483 gold badges23 silver badges40 bronze badges

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

1 Comment

Sandeep Patel Over a year ago

can u paste out code snippet and image of folder structure?

Collectives™ on Stack Overflow

How can I get images in react from nodeJS API server

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related