CODEWITHSUNDEEP
reactjsreact-nativeexpo
Anuj Kumar
Anuj Kumar

Reputation: 1

Image is showing in react native expo project from localhost

I have a react native expo project. In this project I have a image component. I have also a another server which is running on localhost:3000 (php server).

<Image source={{uri: "https://media.istockphoto.com/photos/straight-down-above-tall-towers-rising-over-austin-texas-picture-id1320415956?s=612x612"}} style={{width:100,height:100}} />

Everything works fine, but when I changed to url to load image from "localhost:3000". Image is not showing.

<Image source={{uri: "http://localhost:3000/uploads/avatar/user-1.jpg"}} style={{width:100,height:100}} />

But both image url is right and works in a browser.

Upvotes: 0

Views: 1082

Answers (1)

GrgaMrga
GrgaMrga

Reputation: 520

The localhost changes depending on where you're running the app.

To get the image, your app needs to target the address of the device the server is running on, and not the address of the device the app is running on.

If the device your app is running on is on the same wifi as the server, try targetting through your IP address:

<Image source={{uri: "http://192.168.1.123:3000/uploads/avatar/user-1.jpg"}} {...rest} />

Check this article to find your IPv4

Upvotes: 1

Related Questions