React Native Image 不適用於特定的 URL

Question

我在下面有以下代碼，其中 Image 組件包含兩個 Image 組件。

  <View style={styles.container} >
    <Image
      style={{width: 50, height: 50}}
      source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
    />
          <Image
      style={{width: 50, height: 50}}
      source={{uri: 'http://lghttp.24811.nexcesscdn.net/80B00B/qpb/media/catalog/product/cache/11/image/439x334/9df78eab33525d08d6e5fb8d27136e95/q/w/qw_neverdonejoggers_p_.png'}}
    />
  </View>

對於第一個 github URL 它會按預期正確呈現 img 徽標。 但是對於第二張圖片，它不渲染源代碼：qw_neverdonejoggers_p_.png

這讓我得出結論，URL 有問題，但是點擊 URL 正確加載了 Img：

http://lghttp.24811.nexcesscdn.net/80B00B/qpb/media/catalog/product/cache/11/image/439x334/9df78eab33525d08d6e5fb8d27136e95/q/w/qw_neverdonejoggers_p_.png

我試圖在這里復制這個問題， https://rnplay.org/apps/_dQXXw但它正確地呈現了兩個圖像。

因此，出於某種原因，它只能在我的本地計算機上渲染第二張圖像嗎？

使用：“反應”：“15.4.1”，“反應本機”：“^ 0.39.2”，

Answer 1

Andrés 的回答有點正確，但它沒有解決問題的確切原因，那就是 iOS 的 App Transport Security。 默認情況下，iOS 不允許純文本請求 (http)，因此您需要定義一個可以允許覆蓋此特定保護機制的 URL 的“白名單”。 您已經設置了該列表，以便您的應用程序可以在開發期間連接到 localhost，因此只需向其中添加新條目即可。 您可以在此答案中了解如何執行此操作。 當然，這僅在您事先知道 URL 列表時才有效，這可能不適合您的需要。 在這種情況下，請查看這篇文章。

Answer 2

uri僅適用於 https。 在 Android 中，它應該適用於 http 或 https。

您將在此處找到更多信息。

Answer 3

伙計們，圖像組件有一個問題是，如果第一次使用source={{uri: 'some link'}}初始化組件，它可能不起作用（至少當我從 HTTPS URL 從 Firebase 存儲中獲取圖像時，它可能不起作用） . 訣竅是你必須觸發對 source 道具的更改，比如首先你需要將 source 保持為source={undefined}然后更改為source={{uri: 'some link'}} 。 希望它能幫助別人

Answer 4

我如何使用 http 或 https url 工作的圖像源是通過重置正在使用的 android 模擬器。

您可以通過打開 android studio 清除模擬器，然后單擊頂部欄中的工具選項卡，一旦它打開就選擇 AVD Manager 選擇您正在使用的模擬器，右鍵單擊它，然后選擇擦除數據。 該過程完成后，在 react-native 項目 $ npx react-native run-android 的根目錄打開 cmd 或終端

Answer 5

與除了發出HTTPS ，請確保您設置的width和height的的Image