title: Fetch image from API
body: <p><strong>Q1)</strong> In my reactjs application, I am trying to fetch an API from my backend Nodejs server. The API responds with an image file on request.</p>
  
  <p>I can access and see image file on <a href="http://192.168.22.124:3000/source/592018124023PM-pexels-photo.jpg" rel="noreferrer">http://192.168.22.124:3000/source/592018124023PM-pexels-photo.jpg</a></p>
  
  <p>But in my reactjs client side I get this error on console log.</p>
  
  <blockquote>
    <p>Uncaught (in promise) SyntaxError: Unexpected token � in JSON at position 0</p>
  </blockquote>
  
  <p><strong>Reactjs:</strong></p>
  
  <pre><code>let fetchURL = 'http://192.168.22.124:3000/source/';
    let image = name.map((picName) =&gt; {
      return picName
    })
  
    fetch(fetchURL + image)
    .then(response =&gt; response.json())
    .then(images =&gt; console.log(fetchURL + images));
  </code></pre>
  
  <p><strong>Nodejs:</strong> </p>
  
  <pre><code>app.get('/source/:fileid', (req, res) =&gt; {
  const { fileid } = req.params;
  res.sendFile(__dirname + /data/ + fileid); 
  });
  </code></pre>
  
  <p><strong>Is there any better way to do than what I am doing above?</strong></p>
  
  <p><strong>Q2)</strong> Also, how can I assign a value to an empty variable (which lives outside the fetch function)<br>
  jpg = fetchURL + images;
  So I can access it somewhere.</p>