uri圖像未在React native Image視圖中呈現

Question

我是React Native開發和使用React Native開發android應用程序的新手。 我有一個個人資料頁面，我試圖在其中顯示姓名和聯系方式，如下所示。

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>
);

除了第一個圖像正在加載到第一個圖像視圖，第二個圖像顯示空白處，一切正常。 請幫我弄清楚。

另外，請指導我如何使用變量代替圖片網址。

Answer 1

可能是您的網絡速度較慢，或者圖像路徑不正確或服務器問題。 您必須在google的任何虛擬圖像路徑上測試這種情況。 例如使用這個

<Image
      style={{width: 100, height: 100}}
      source={{uri: 
   'https://www.planwallpaper.com/static/images/9-credit-1.jpg'
    }}/>

Answer 2

另外，如果您正在使用本地文件，則在鏈接上使用localhost時要格外小心。 模擬器可能會設置一個新的本地主機，這將破壞您的URL。 在這種情況下，您要做的就是用您的LAN ip地址替換“ localhost”一詞。