How to display blob image in react native

Question

Here is my code:

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

Where BlobImage is an image in blob string like thisc916851b-3e53-432d-8d18-3de293776859?offset=0&size=371537.

Edit:

I upload a base64 image to cpanel, and it is automatically cast to Blob. When I fetch the data from cpanel, I get a buffer array and unable to display it. I tried this but it doesn't work

var blob = new Blob([img], {type: "image/png"})
var blobUrl = URL.createObjectURL(blob);

And in render

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

Where img is the raw data from cpanel and it's a byte array.

This is how I get the data using react-native-photo-upload

<PhotoUpload
    onPhotoSelect={avatar => {
                   if (avatar) {
                       this.setState({
                           imageUrl: avatar
                       });
                   }}}>

Solution

You can convert the blob to base64 from FileReader api and then display it.

Code:

const fileReaderInstance = new FileReader();
 fileReaderInstance.readAsDataURL(blob); 
 fileReaderInstance.onload = () => {
     base64data = fileReaderInstance.result;                
     console.log(base64data);
 }

and display it once you get it as:

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

Comments

[Ma9ic]

Is this still the best option when using expo?

[A G]

Works as of Nov, 2021.