can't display images from localhost dev server in react native

Question

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.

Answer 1

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.