CODEWITHSUNDEEP
javascriptreactjsreact-native
BGTabulation BGTabulate
BGTabulation BGTabulate

Reputation: 1747

React Native: Serving URI from localhost not rendering the image

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?

Upvotes: 2

Views: 2313

Answers (3)

Bader Alrabie
Bader Alrabie

Reputation: 1

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

Upvotes: 0

ravibagul91
ravibagul91

Reputation: 20765

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 
/>

Upvotes: 3

Prithwee Das
Prithwee Das

Reputation: 5246

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

Upvotes: 4

Related Questions