javascript - React Native: Serving URI from localhost not rendering the image - Stack Overflow

admin管理员组

文章数量:1431434

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

Share Improve this question Follow edited Sep 20, 2019 at 8:46 ravibagul91 20.8k66 gold badges3838 silver badges6161 bronze badges asked Sep 20, 2019 at 8:42 BGTabulation BGTabulateBGTabulation BGTabulate 1,74733 gold badges2020 silver badges4040 bronze badges 8

• 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

 |  Show 3 more ments

3 Answers 3

Sorted by: Reset to default 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

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

本文标签： javascriptReact Native Serving URI from localhost not rendering the imageStack Overflow