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

The issue:

We have encountered this issue when we were trying to fetch an image from an external source. We have used JavaScript Fetch API to get the image binary data. Following is the sample code:

fetch('https://s3domain/relativepath/dagfinn101.jpg')
.then(response => response.json())
.then(images => {
   // Create a local URL of that image
   const localUrl = URL.createObjectURL(images);
   setImageData(localUrl);
});

The solution:

We tried to get the jpg image using fetch but we have used .json() method to get the image. This .json caused the this issue. As soon as we change the .json method to .blob method the issue was fixed.

Following is the fixed code:

fetch('https://s3domain/relativepath/dagfinn101.jpg')
.then(response => response.blob())
.then(images => {
   // Create a local URL of that image
   const localUrl = URL.createObjectURL(images);
   setImageData(localUrl);
});