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.

Loanloanda

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} />

Loanloanda

The new package is rn-fetch-blob – Cottonwood

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}}/>

Mansfield

Answer 3

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

Semblance

Thanks, your right. I got it working a few days ago. I Just havn'nt got the chance to write a detailed description of how I did it. – Loanloanda

Answer 4

Here is my own solution to show Blob Image.

<Image
    style={{
     width: moderateScale(100),
     resizeMode: 'center',
     height: moderateScale(100),
   }}
   source={{uri: `${arrayBufferToBase64(property_data?.signature_inspector.data)}`}}
 />

Here is the function

arrayBufferToBase64 = buffer => {
    let binary = '';
    let bytes = new Uint8Array(buffer);
    let len = bytes.byteLength;
    for (let i = 0; i < len; i++) {
      binary += String.fromCharCode(bytes[i]);
    }
    return `${binary}`;
  };

Reremouse