Access image in local storage

Question

Hi am trying to access image in assets/images/flower.png Am using react-native-fs but I tried different path but no luck. has anyone did this before and succeeded ?

var RNFS = require("react-native-fs");
this.base64RouteImage = await RNFS.readFile(
  "../../../assets/images/flower.png",
  "base64"
).then();
console.log("64 is " + base64data);

I tried below different path as below

/images/flower.png
app/assets/images/flower.png
/app/assets/images/flower.png
file://app/assets/images/flower.png
./assets/images/flower.png
import Flower from "../../../assets/images/flower.png";
../../../assets/images/flower.png

EDIT 1

I have added permission read/write internal/external permission in android

EDIT 2

I tried

RNFS.DocumentDirectoryPath + "/assets/images/flower.png" but it says

error: ENOENT: /data/user/0/com.tipll/files/assets/images/flower.png (No such file or directory)

I need to access the images in react-native assets folder app/assets/images/flower.png

Still no luck

EDIT 3

my path reference from my current screen is like ../../../assets/images/flower.png

EDIT 4

EDIT 5

Am trying to access image from app/views/routes/view/Flower.js this Flower.js screen.

Any help will be appreciated.

Thanks in advance

can you clear out that what paltform you are testing it on! becuase you tagged both React Techs but no platform! — Rizwan Atta, Nov 19 '19 at 06:23
so you want to show the flower image in an Image Component ? in android and iOS app ? — Rizwan Atta, Nov 19 '19 at 06:27
@Rizwanatta I need to local image to convert it to base64 string to load. I need it on both iOS and Android — suja, Nov 19 '19 at 06:32
has your kind self been able to locate this my friend: https://github.com/react-native-community/react-native-image-picker — Rizwan Atta, Nov 19 '19 at 06:33
if you are aiming to upload an image and you want it work on both platforms securely and better this is the way to go! — Rizwan Atta, Nov 19 '19 at 06:34
@Rizwanatta its a picker right ? in my app I can't let user have a selection picker. I need get only that particular image without any popups/dialogs to pick for user. There is no upload. But I need base64 of my image for social media share — suja, Nov 19 '19 at 06:37
use `const rootPath = RNFS.DocumentDirectoryPath; //= (os == "android") ? RNFS.DocumentDirectoryPath :RNFS.MainBundlePath` — Saadi, Nov 19 '19 at 07:13

score 0 · Answer 1 · answered Nov 19 '19 at 07:25

0

To Access data from internal memory: Filepath "/storage/emulated/0/".

To Access data from external memory(SD-CARD): Filepath "/storage/0000-0000/".

Few questions arise here,

1) How is the SD-CARD name "0000-0000"?

Well, 0000-0000 is Volume Serial Number, it changes every time an SD-CARD is formatted. If you want to regulate it i.e you want to add your own Serial Number, check out this post Change Serial Number.

2) How do you now what your SD-CARD Serial Number is?

You can use file managers in Playstore to know your SD-Cards Serial Number and also explore this discussion.

answered Nov 19 '19 at 07:25

Ron Astle Lobo

1,284
2
14
34

Is this related to android only ? Could you check my EDIT 2 – suja Nov 19 '19 at 07:49
I tried "torage/emulated/0/" + "/assets/images/flower.png" I got error as Error: ENOENT: /storage/emulated/0/assets/images/flower.png (No such file or directory) – suja Nov 19 '19 at 08:06
i will update my answer. i thought local storage as internal storage. – Ron Astle Lobo Nov 19 '19 at 08:08
are you able to put that image in an image tag with the path that you are using. – Ron Astle Lobo Nov 19 '19 at 08:12
Can you check my EDIT 3 & EDIT 4 added the structure – suja Nov 19 '19 at 10:49

Bored · Answer 2 · 2019-11-19T15:36:53.703

0

If you want read from internal storage (of device) try this:

    file:///storage/emulated/0/Pictures/flower.jpg

I guess that you want read from a folder in your rn project... You must provide the structure of your project

So try with require('../../../assets/images/flower.png')

or try with absolute path: require('MyApp/app/assets/images/flower.png')

edited Nov 19 '19 at 15:36

answered Nov 19 '19 at 09:00

Bored

499
4
11

Can you check my EDIT 3 & EDIT 4 added the structure – suja Nov 19 '19 at 10:46
you must access the image from App.js? – Bored Nov 19 '19 at 10:52
nope from a screen which is inside like its path is like app/views/routes/view/Flower.js – suja Nov 19 '19 at 11:21
I tried require but got error `Error: ENOENT: /data/user/0/com.tipll/files16 (No such file or directory)` – suja Nov 19 '19 at 14:20

Access image in local storage

2 Answers2