CODEWITHSUNDEEP
reactjsimageexpress
Jérome BORGA
Jérome BORGA

Reputation: 715

Cannot display image from backend express react

I'm having a backend server with an upload folder directly in the root.

In my backend, http://localhost:4000, I have my upload folder and I'd like to display the image that matched the url given for each element I have in my backend :

     const url = "http://localhost:4000/"
    {filteredDrawings && filteredDrawings.map((drawing) => (
    etc...
 <div className='cardimage-container'>
   <Card.Img variant='top' src={`${url}/${drawing.imageLink}`} />
 </div>

When checking my browner, i have src="upload/testupload.jpg" displayed as src of the image but I have nothing displayed

I wrote app.use("/upload", express.static(path.join(__dirname, "../upload"))); in my my backend app.

When I try http://localhost:4000/upload/uploadtest.jpg, I have "Cannot GET /upload/uploadtest.jpg"

Thanks in advance

Upvotes: 1

Views: 783

Answers (2)

J&#233;rome BORGA
J&#233;rome BORGA

Reputation: 715

Ok problem solved, the issue was the quote not being ' but `

app.use(`/upload`, express.static(`upload`));

Upvotes: 1

mmantach
mmantach

Reputation: 148

the error you faced is because the route /upload/uploadtest.jpg is not defined well as a route in the nodejs , you should read the document based on id or other identifier and return as a binary. as for react try {{ }} without $ in this case it should be worked without any problem

Upvotes: 0

Related Questions