Display blob image (MS Graph) in react native (Expo)

I have the following fetch function in my react native project to return a blob image from MS Graph, the return works but i cannot seem to display the blob as an image.

  //Blob Picture
      fetch('https://graph.microsoft.com/v1.0/me/photo/$value', {
        headers: { 'Authorization': "Bearer " + accessToken },
      })
        .then((response) => {
          // console.log(response);
               this.setState({ BlobImage: response});
        })
        .catch((error) => {
          console.error(error);
        });

I have the following fetch function in my react native project to return a blob image from MS Graph, the return works but i cannot seem to display the blob as an image.

        //Blob Picture
      fetch('https://graph.microsoft.com/v1.0/me/photo/$value', {
        headers: { 'Authorization': "Bearer " + accessToken },
      })
        .then((response) => {
          // console.log(response);
               this.setState({ BlobImage: response});
        })
        .catch((error) => {
          console.error(error);
        });

Then i wish to display the image like so:

<Image source={{uri: BlobImage}} style={{ height: 200, width: null, flex: 1 }}/>

I’ve tried everything to get this working but am not having any luck.

@kbloom-autologue Did you have a similar issue recently ?

No, but I haven’t tried displaying an image using the raw blob. I think can think of two things to try:

  1. Prepend the data:image/png;base64, to the image to let the uri parser know that it is a data uri.

  2. Write the blob to the FileSystem.cacheDirectory then use the file uri as the Image uri.

1 Like

@ma9ics Have you had any luck with this issue?

Not yet :unamused:, having issues converting it to Base64.

Hey there! Did you find any solution on how to display the image downloaded from MS graph?
Thanks

Nope still no luck, wbu?