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

How to / Third Party Tooling
1

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.

2

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

3

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
4

@ma9ics Have you had any luck with this issue?

5

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

6

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

7

Nope still no luck, wbu?

8

I was thinking maybe this is not even coding problem. What if it’s the LED display having issue with processing your command. Why not try out a new or another LED display to really know what’s up.