React-native - Populate Image with file path to base64

Question

When I receive a base64 Image from the server I save it to the android file system.
Is it possible to give an Image the path to the the base64 to populate the Image.

For example, something like this:

<Image source={uri: "/storage/emulated/0/Pictures/Image.jpg"} />

Thanks.

Edit @Xeijp

I save the following base64 image to the android file system :

var imageBase64 = 'data:image/jpeg;base64,'+base64Str;

I save it to the picture directory:

/storage/emulated/0/Pictures/Image.jpg

I then populatate the image like this:

<Image source={{uri: "file:///storage/emulated/0/Pictures/Image.jpg"}} style={styles.image} />

The image is still not rendering.

Any ideas??

@Salman Hasrat Khan Similar to solution here http://stackoverflow.com/questions/38658716/react-native-pdf-view-how-to-populate-pdfview-with-base64-or-blob — Larney, Dec 18 '16 at 17:45

score 1 · Answer 1 · answered Aug 04 '16 at 16:44

1

On Android, when using uri path as source of Image element you need to add prefix file:// otherwise it won't work.

    <Image source={{ uri : 'file:///storage/emulated/0/Pictures/Image.jpg' }}/>

answered Aug 04 '16 at 16:44

Xeijp

853
1
7
18

It is still not working. check out my edit on the question. Thanks for the response. – Larney Aug 05 '16 at 09:14

score 0 · Answer 2 · answered Feb 28 '17 at 15:17

0

You can try using require to load the image from file path and then pass it to Image:

const imageFromFile= require('/storage/emulated/0/Pictures/Image.jpg');

<Image source={imageFromFile} style={styles.image} />

answered Feb 28 '17 at 15:17

Vipin Dubey

1,393
3
10
13

React-native - Populate Image with file path to base64

2 Answers2