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

SaschaM78 · Accepted Answer · 2019-04-29 13:39:53Z

26

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

edited Apr 29, 2019 at 13:39

SaschaM78

4,5074 gold badges36 silver badges46 bronze badges

answered Apr 19, 2018 at 7:53

Pritish Vaidya

22.3k4 gold badges62 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ma9ic Over a year ago

Is this still the best option when using expo?

A G Over a year ago

Works as of Nov, 2021.

da coconut Over a year ago

Can you send the full code?

Ali Zeynalov · Accepted Answer · 2018-04-19 07:39:45Z

0

Maybe you can try something like this

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

answered Apr 19, 2018 at 7:39

Ali Zeynalov

3,0488 gold badges35 silver badges54 bronze badges

Comments

Andre · Accepted Answer · 2024-05-09 13:15:42Z

0

As of 2024, this solution is no longer viable, since uri doesn't render blobs as it was shown. However i've used your question logic to bypass the error on response.data as a blob on the db:

.then((response) => {
            if (response.status === 200 && response.data) {
                const blob = new Blob([response.data]);
                return URL.createObjectURL(blob);
            } 
        })

const response = await getProfilePic({ userId: currentUser?.id || '' });
            if (response) {
                setProfilePicUri(response);
            }

<ImageTouchable alt='Profile Picture' source={{uri: profilePicUri}} />

answered May 9, 2024 at 13:15

Andre

11 bronze badge

Collectives™ on Stack Overflow

How to display blob image in react native

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related