2

I want to know how to load an image from FileSystem in expo, the fileUri looks something like this -

file:///Users/username/Library/Developer/CoreSimulator/Devices/B9799180-7428-41D8-A4BC-C3A34BF93043/data/Containers/Data/Application/3D502086-E077-42D5-9B56-A1DB78894261/Documents/ExponentExperienceData/%2540username3%252FProject/image.jpg

I have tried loading it by fetching with fetch API and then converting it to base64. However, the Image component doesn't load the base64 encoded image probably because the base64 string is too huge.

Any other solution?

Improve this question

2 Answers 2

Reset to default
1

You can just pass the url path to source in Image component and it will automatically load the image.

<Image source={{ uri: filepath }} />
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Hey Mohammad, I tried that already but it doesn't work. Although it worked in other cases where I used ImagePicker(IP). Note: IP gives the filepath based on cacheDirectory.
I've tested this approach using contacts (expo-contacts) which provides an image object with a uri key and had no problem loading files as demonstrated in this snack: snack.expo.dev/@headwinds/contacts-hide-and-seek
0

Let us consider your image data is in below format

let fileuri= "file:///data/user/0/host.exp.exponent/cache/ExperienceData/d7515ba4-f1a1-47e5-bb3a-f635f47b3fa3.jpeg"

you can load the data using below code:

<Image source={{ uri: fileuri }} style={{width:100,height:100}} />

also if your fileuri is in base64 like format like,

("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxISEhIQEhIQE...."), still you can load your image using same above code

Improve this answer

Comments