How do I display/render image from mongoDB with react native?

Question

I have been researching and trying many solutions I could think of;

I want to render or display my images from my MongoDB Atlas Server to my react native app. I have done the backend work using multer to get file req and save it on my ../assets/ folder but when I try to fetch it and use <Image source={{uri: photo}}/> it either blank or shows a number e.g 22.

This is my file path after multer and saved in my MongoDB

../assets/15985061325795950a472-5363-43b7-851e-e2afab049d0f.jpg

This is my Tag

<Image source={photo} style={styles.image} borderRadius={10} />

I get blank screens; I tried using require() but it requires a String, not {photo}.

I am using Expo-Client.

Thanks for your time.

Are you saving files locally to ../assets/ folder? or it is a reference to your server directory? — Sameer Kumar Jain
– Sameer Kumar Jain, Commented Aug 27, 2020 at 6:28
Yes files are stored locally but the image paths are from my Db, they are dynamically populated. — Jeffrey Odogba
– Jeffrey Odogba, Commented Aug 27, 2020 at 17:05
since you can not use require, you have to explicitly embed the assets and then reference accordingly. — Sameer Kumar Jain
– Sameer Kumar Jain, Commented Aug 27, 2020 at 17:28

Jamal S · Accepted Answer · 2020-08-27 09:30:00Z

1

From you photo path:

 ../assets/15985061325795950a472-5363-43b7-851e-e2afab049d0f.jpg

it seems that you are storing the image files locally after fetching. so for the local image files we have to use source={require('localPath')}.

so you should try

 <Image source={require('localPath')} />

edited Aug 27, 2020 at 9:30

Jamal S

1,8451 gold badge22 silver badges28 bronze badges

answered Aug 27, 2020 at 7:32

maher

112 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jeffrey Odogba Over a year ago

I am looping every image from the parent component and pass the image value to its children component which is {photo} the images are dynamically populated, applying to require("localPath") might vary but require({photo}) do not accept photo been passed.

Khanh Le Tran · Accepted Answer · 2020-08-27 07:13:40Z

0

Try this:

<Image source={require('your path')} />

answered Aug 27, 2020 at 7:13

Khanh Le Tran

9005 silver badges16 bronze badges

1 Comment

Jeffrey Odogba Over a year ago

my paths are dynamically populated so its not possible to using require('my path') or just <Image source={photo} />

TANYERES Alexandre · Accepted Answer · 2020-09-30 06:45:54Z

0

You need to put the full path of your picture location since it's not on your project folder. in the URL in your image component it's something like

<image
source={{ uri: SERVER_IP + '/assets/15985...049d0f.jpg' }}
/>

so SERVER_IP can be like yourwebsite.com or 127.0.0.1:3000 if you are still in local. and remove the ..

answered Sep 30, 2020 at 6:45

TANYERES Alexandre

805 bronze badges

Collectives™ on Stack Overflow

How do I display/render image from mongoDB with react native?

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related