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 /200/300 how to deal with this?

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?

• javascript
• reactjs
• react-native

• You probably have CORS error – Lazar Nikolic Commented Sep 20, 2019 at 8:44
• Are you sure this.props.user.avatar contains extension like .jpeg? If not you need to add it manually. – ravibagul91 Commented Sep 20, 2019 at 8:48
• source={{...}} I have doubt on this json syntax – Jaydip Jadhav Commented Sep 20, 2019 at 8:49
• @LazarNikolic My cors config are open for all – BGTabulation BGTabulate Commented Sep 20, 2019 at 8:49
• @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 Commented Sep 20, 2019 at 8:51

3 Answers 3

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

From the docs,

Many of the images you will display in your app will not be available at pile 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 remended 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 
/>

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