CODEWITHSUNDEEP
javascriptreact-nativeexpo
user10004730
user10004730

Reputation:

How to load an image from FileSystem in expo?

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?

Upvotes: 2

Views: 2514

Answers (2)

vivek sharma
vivek sharma

Reputation: 369

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

Upvotes: 0

Mohammad Harith
Mohammad Harith

Reputation: 619

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

<Image source={{ uri: filepath }} />

Upvotes: 1

Related Questions