uri image is not rendering in React native Image view

Question

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.

Answer 1

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'
    }}/>