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.
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.