CODEWITHSUNDEEP
react-nativebase64
ekcb9
ekcb9

Reputation: 13

Displaying images encoded with base64 in react native

I am new to react native and I am trying to display images encoded with base 64. 

 <Image source={{uri: `data:image/png;base64,${element.img}`}}
                           style={{height: 200, width: null, flex: 1}}/>

This is the mongoose scheme where I store my images

 img: {
    data: Buffer,
    contentType: String,
},

And this is how I save them to database (photoData contains img):

this.setState({img:data.base64})
axios.post('uri', photoData, config)

Here is my img data : img data

data is returning back as buffer so using this

data:image/png;base64,${element.img}

is not working. I tried using Buffer.from('','base64').toString('ascii') but still, image is not showing.

Upvotes: 1

Views: 597

Answers (1)

Guruparan Giritharan
Guruparan Giritharan

Reputation: 16364

Your response is a buffer object you will have to use the below code to convert to base64 Image.

const data = Buffer.from(response, 'binary').toString('base64');

const base64Image = `data:image/png;base64,${data}`;

and then you can use the image normally
<Image source={{uri: base64Image}}/>

Upvotes: 1

Related Questions