Home > Blockchain >  Cannot display image from backend express react
Cannot display image from backend express react

Time:01-03

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

CodePudding user response:

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

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

CodePudding user response:

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

  • Related