uri图像未在React native Image视图中呈现

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

Answer 2

Also if you are in using local files be extra careful when you are using localhost on your links. Emulators may set a new localhost which would break your urls for them. In this case all you would have to do is to replace the word "localhost" with your LAN ip address.