0

I'm trying to render images in react native from my local dev server, but I'm not able to shoe images. The image URI I'm getting from the server is a proper one I checked that with copying and pasting it to the chrome tab and it opens up with a new tab showing the image. http://localhost:4001/f931a2c2-4268-4bd8-8f6f-c0bab923a374.jpeg, this is the example of the URI, and this is my image component code.

export const LogoImage: React.FC = ({ logo }) => {
  return (
    <View style={styles.wrapper}>
      <Image
        source={{
          uri: "http://localhost:4001/${logo}",
        }}
        style={styles.image}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  image: {
    height: "100%",
    width: "100%",
    resizeMode: "cover",
  },
  wrapper: {
    height: 200,
    width: 200,
  },
});

Any idea and suggestion would be appreciated.

Kartikey
  • 4,516
  • 4
  • 15
  • 40
Emad Baqeri
  • 2,333
  • 2
  • 14
  • 29
  • Are you using an emulator or are you using a real device to test this out with? – VtoCorleone Sep 20 '21 at 16:39
  • @VtoCorleone I'm using my phone actually, a real android device. I should mention that I have tried it and external image link from pixabay and it worked and I believe that the problem is connecting to the localhost – Emad Baqeri Sep 20 '21 at 16:42
  • 2
    You can use adb to bridge the tcp connection for that port. Otherwise localhost refers to your phone's network, not your computer's. – windowsill Sep 20 '21 at 17:27

1 Answers1

2

Try replacing the keyword localhost with you own IPv4-address. You can get it by executing ipconfig in cmd. I also found a similar question here.

PiaBa
  • 155
  • 5