Question

96

Convert base64 string to image in react native

rated 0 times [ 103] [ 7] / answers: 1 / hits: 25419 / 7 Years ago, sun, january 7, 2018, 12:00:00

Problem

I created a social media app with expo's react native, and wanted to add the ability to upload images. Since expo won't let you convert a file to a blob to upload, I just uploaded the base64 image data as a string to the server database. How can I convert this data into the viewable image again after I download the data from off of the server?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

pierce

Add To Favorites

Follow

Total Points: 315

Total Questions: 103

Total Answers: 89

Location: Svalbard and Jan Mayen

Member since Mon, Jun 7, 2021

3 Years ago

answered 7 Years ago jarod · Accepted Answer

You can do this:

var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANS...';

<Image style={{width: 50, height: 50}} source={{uri: base64Icon}}/>

In the base64Icon variable you need to put your base64 data after data:image/png;base64,. Like this:

var base64Icon = 'data:image/png;base64,{PLACE_YOUR_BASE64_DATA_HERE}';