React Native: Serving URI from localhost not rendering the image

Question

I'm trying to display my uploaded image saved from to my backend folder. Its on different file so to retrieve I have to call it http://localhost:3333/userprofile/5/5.jpeg. But it does not work on my react native code, I tested it on both android and IOS

<Thumbnail
    small
    source={{
        uri: `http://localhost:3333/userprofile/${this.props.user.id}/${this.props.user.avatar}`
    }}
/>

it works when I open it on browser. It also work if I use different url like https://picsum.photos/200/300 how to deal with this?

Are you sure this.props.user.avatar contains extension like .jpeg? If not you need to add it manually. — ravibagul91
– ravibagul91, Commented Sep 20, 2019 at 8:48
@ravibagul91 if I outputed in text its exactly http:/localhost:3333/userprofile/5/5.jpeg and when I copy and paste on browser it works — BGTabulation BGTabulate
– BGTabulation BGTabulate, Commented Sep 20, 2019 at 8:51

Prithwee Das · Accepted Answer · 2019-09-20 08:57:09Z

4

If you're using android emulator you have to use 10.0.2.2 to access localhost on your PC. and if you're using a real device then you need to be on the same wifi network and have to use your PC's ip instead of localhost

answered Sep 20, 2019 at 8:57

Prithwee Das

5,3162 gold badges18 silver badges28 bronze badges

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

2 Comments

Sanjeev Over a year ago

Thank you, I replaced localhost with '10.0.2.2' and it worked

Mohamed Imran Over a year ago

I've spent so much time on this and finally this answer saved me! Thanks a ton. It's really weird that the url works perfectly fine if we open it on the browser with localhost browser but not picking up from the component.

ravibagul91 · Accepted Answer · 2019-09-20 08:57:10Z

3

From the docs,

Many of the images you will display in your app will not be available at compile time, or you will want to load some dynamically to keep the binary size down. Unlike with static resources, you will need to manually specify the dimensions of your image. It's highly recommended that you use https as well in order to satisfy App Transport Security requirements on iOS.

You need to provide dimensions for your image.

<Thumbnail
    small
    source={{
        uri: `http://localhost:3333/userprofile/${this.props.user.id}/${this.props.user.avatar}`
    }}
    style={{width: 400, height: 400}} //provide dimensions 
/>

answered Sep 20, 2019 at 8:57

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

Comments

Bader Alrabie · Accepted Answer · 2023-10-20 10:41:19Z

0

Use your IP Adress insted localhost <Thumbnail small source={{ uri: http://<Your IP Adress>:3333/userprofile/${this.props.user.id}/${this.props.user.avatar} }} />

answered Oct 20, 2023 at 10:41

Bader Alrabie

1

Collectives™ on Stack Overflow

React Native: Serving URI from localhost not rendering the image

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related