Want to show the image that i get from db as by its name

Question

SO my problem is images that i upload are set in the database and saves in vs code in uploads folder but i dont know how to display them on front end i have tried something but furthur needs to know the procedure

 <script>
                      
  axios
    .get(
      "http://localhost:8000/hotels")
    .then((response) => {
      console.log(response.data)
      for (let i = 0; i < response.data.length; i++) {
              document.getElementById('data').innerHTML+=`<tr class="odd">
                      <td class="dtr-control sorting_1" tabindex="0">${response.data[i].id}</td>
                      <td><img src='${response.data[i].image}'></td>
                      <td>${response.data[i].name}</td>
                      <td>${response.data[i].description}</td>
                      <td>${response.data[i].price}</td>
                      <td >${response.data[i].address}</td>`                                         
      }
     
  })
  
    .catch((error) => {
      console.log(error);
    });

                      </script>

So here you can see when i upload data the images are stored in the uploads folder All we need is to display image on front end somehow

Answer 1

Your /uploads folder is not hosted like other routes. you need to host it in order to resolve the URL. Here is how you can using express.

EDIT: Explanation In your app.js/index.js(where you have initialized app()) write the code below

const path = require('path')
app.use('/uploads',
  express.static(path.join(__dirname,
    'uploads')))

Also i believe the question is similar to How to serve an image using nodejs

Answer 2

You can use instead of

<td><img src='${response.data[i].image}'></td>

this line

<td><img src='${new URL("uploads/"+response.data[i].image, window.location.origin).toString()}'></td>