反应本机图像不适用于特定 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，但它正确地渲染了两个图像。

所以它只是在我的本地计算机上，出于某种原因我可以渲染第二张图像？

使用：“react”：“15.4.1”，“react-native”：“^0.39.2”，

原文由 Shivam Sinha 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Andrés 的回答有些正确，但并没有解决问题的确切原因，那就是 iOS 的 App Transport Security。默认情况下，iOS 不允许纯文本请求 (http)，因此您需要定义一个允许覆盖此特定保护机制的 URL 的“白名单”。您已经设置了该列表，以便您的应用程序可以在开发期间连接到 localhost，因此只需向其中添加新条目。您可以在这个 答案 中看到如何做到这一点。当然，这只有在您事先知道 URL 列表时才有效，这可能不适合您的需要。在这种情况下，看看 这篇文章。

原文由 martinarroyo 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

uri 仅适用于 https。在 Android 中，它应该适用于 http 或 https。

您将 在此处 找到更多信息。

原文由 Andrés Andrade 发布，翻译遵循 CC BY-SA 3.0 许可协议