React-native - Populate image with Blob that has been converted to a URL

Question

I want to populate an image with a uri.
I request the image from the server and it returns a BLOB.

BLOB when displayed to console:

I then convert the BLOB into a URL with the following line:

var blobUrl = URL.createObjectURL(blob);  

blobUrl when displayed to console

I then try and populate the Image with the URL:

<Image source={{uri: blobURL}} style={{width: 100, height: 50}} />

The image will not display. What should I do?

I am using the android emulator which is connected to the localhost. Could possibly have something to do with that seen as the BLOB url would be stored to the localhost?

Or it could be a simple syntax error?

Thanks.

Answer 1

Solution

React-Native does not support blobs [ref: Git/React-Native]. In order to get this working I had to download react-native-fetch-blob which returns a base64 string.

Function that returns base64 string:

var RNFetchBlob = require('react-native-fetch-blob').default;

getImageAttachment: function(uri_attachment, mimetype_attachment) {

  return new Promise((RESOLVE, REJECT) => {

    // Fetch attachment
    RNFetchBlob.fetch('GET', config.apiRoot+'/app/'+uri_attachment)
      .then((response) => {

        let base64Str = response.data;
        var imageBase64 = 'data:'+mimetype_attachment+';base64,'+base64Str;
        // Return base64 image
        RESOLVE(imageBase64)
     })

   }).catch((error) => {
   // error handling
   console.log("Error: ", error)
 });
},

Populate Image with base64
I then populate the image withe the returned base64Image with:

<Image source={{uri: imageBase64}} style={styles.image} />

Answer 2

After you have received the blob:

let imageUri = "data:image/png;base64," + blob;

<Image source={{uri: imageUri, scale: 1}} style={{height: 30, width: 30}}/>

Answer 3

May be solved by react-native-fetch-blob, it's about issue #854