uri image is not rendering in React native Image view
14,886
It may be your network is slow or may be your image path is not correct or your server issue. You have to test this case on any dummy image path from google. For example use this
<Image
style={{width: 100, height: 100}}
source={{uri:
'https://www.planwallpaper.com/static/images/9-credit-1.jpg'
}}/>
Author by
Raghuram db
Updated on July 25, 2022Comments
-
Raghuram db almost 2 years
I am new to React native development and developing an android application using React Native. I have a profile page where I am trying to show name and contact detail like below.
return( <View style={{flex: 1}}> <ScrollView contentContainerStyle={styles.contentContainer}> <View style={styles.card}> <View style={styles.horizontalCard}> <Image style={{width: 34, height: 34}} source={{uri: 'http://test.abc.com/appdummyurl/images/mobile.png'}} /> <Text style={styles.header}>{this.state.user_email}</Text> </View> <View style={styles.horizontalCard}> <Image style={{width: 34, height: 34}} source={{uri: 'http://test.abc.com/appdummyurl/images/images/profile.png'}} /> <Text style={styles.header}>{this.state.user_no}</Text> </View> </View> </ScrollView> <TouchableOpacity onPress={this.logOut}> <View style={styles.BottonCard}> <Text style={styles.Btntext}>LOG OUT</Text> </View> </TouchableOpacity> </View> );
Everything is working fine except the first image is loading to first Image view and for the second Image its showing the blank space. Please help me to figure it out.
Also please guide me how can I use a variable in the place of image url.