cPanel Question posted in
The official documentation can be seen here.

How to display blob image in react native – CPanel

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
                       });
                   }}}>
Tags:

2

Answers


  1. 0

    Maybe you can try something like this 

    <Image source={{uri: BlobImage}} style={{ height: 200, width: null, flex: 1 }}/>
    Login or Signup to reply.
  2. 0

    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 }} />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search