image - React Native 图像无法使用特定 URL

Question

下面有以下代码，其中图像组件包含两个图像组件。

  <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 Logo 。但是，对于第二个图像，它不会渲染源:qw_neverdonejoggers_p_.png

这让我得出结论，URL 错误，但是单击 URL 可以正确加载图像:

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”，

Answer 1

Andrés 的回答有些正确，但它没有解决问题的确切原因，即 iOS 的应用程序传输安全性。 iOS 默认情况下不允许纯文本请求 (http)，因此您需要定义一个允许覆盖此特定保护机制的 URL“白名单”。您已经设置了该列表，以便您的应用程序可以在开发期间连接到本地主机，因此只需向其中添加新条目即可。您可以在 answer 中了解如何执行此操作。当然，这只有在您提前知道 URL 列表的情况下才有效，这可能不适合您的需求。在这种情况下，请查看 this article .