Fetch image from API

Question

Q1) 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.

I can access and see image file on http://192.168.22.124:3000/source/592018124023PM-pexels-photo.jpg

But in my reactjs client side I get this error on console log.

Uncaught (in promise) SyntaxError: Unexpected token � in JSON at position 0

Reactjs:

let fetchURL = 'http://192.168.22.124:3000/source/';   let image = name.map((picName) => {     return picName   })    fetch(fetchURL + image)   .then(response => response.json())   .then(images => console.log(fetchURL + images)); 

Nodejs:

app.get('/source/:fileid', (req, res) => { const { fileid } = req.params; res.sendFile(__dirname + /data/ + fileid);  }); 

Is there any better way to do than what I am doing above?

Q2) Also, how can I assign a value to an empty variable (which lives outside the fetch function)
jpg = fetchURL + images; So I can access it somewhere.

Answer 1

The response from the server is a binary file, not JSON formatted text. You need to read the response stream as a Blob.

const imageUrl = "https://.../image.jpg";  fetch(imageUrl)   //                         vvvv   .then(response => response.blob())   .then(imageBlob => {       // Then create a local URL for that image and print it        const imageObjectURL = URL.createObjectURL(imageBlob);       console.log(imageObjectURL);   });