title: How to Fetch and Display an Image from an express backend server to a React js frontend?
body: <p>I'm trying to fetch images from an express backend and display them in the react js frontend. How can I achieve this perfectly?</p>
  
  <p>I have tried to fetch the images saved in my backend folder named "Backup" and display them back to the user in the react js frontend. 
  I have tried this using axios but still am getting an invalid image instead of the correct image.</p>
  
  <p>Below is my fetch request in the frontend.</p>
  
  <pre><code>fetchImages = () =&gt; {
      const imageName = 'garande.png'
      const url = `http://localhost:5000/fetchImage/${imageName}`
      axios.get(url, {responseType: 'blob'})
      .then(res =&gt; {
          return(
              &lt;img src={res.data} alt="trial" /&gt;
          )
      }
  }
  </code></pre>
  
  <p>And this what I have in the server.js file in the backend</p>
  
  <pre><code>app.get('/fetchImage/:file(*)', (req, res) =&gt; {
      let file = req.params.file;
      let fileLocation = path.join('../Backup/images/', file);
      //res.send({image: fileLocation});
      res.sendFile(`${fileLocation}`)
  })
  </code></pre>
  
  <p>I expect the Image to show up in the users page. 
  Thanks.</p>