Fetch image from API : <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>
