CODEWITHSUNDEEP
imagereact-nativereact-native-fs
Larney
Larney

Reputation: 1684

React-native - Populate Image with file path to base64

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??

Upvotes: 3

Views: 1806

Answers (2)

Vipin Dubey
Vipin Dubey

Reputation: 1443

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

Upvotes: 0

Xeijp
Xeijp

Reputation: 873

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

Upvotes: 1

Related Questions