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徽标。但是对于第二个Image，它不会渲染源：qw_neverdonejoggers_p_.png

这让我得出结论，错误的网址，但点击网址正确加载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 但它可以正确渲染图像。

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

使用：＆＃34;反应＆＃34;：＆＃34; 15.4.1＆＃34;，＆＃34; react-native＆＃34;：＆＃34; ^ 0.39.2＆＃34;，

Answer 1

uri仅适用于https。在Android中，它应该可以正常使用http或https。

您可以找到更多信息here。

Answer 2

Andrés的答案有些正确，但它没有解决问题的确切原因，那就是iOS的App Transport Security。 iOS默认情况下不允许明文请求（http），因此您需要定义可以允许覆盖此特定保护机制的URL的“白名单”。您已经设置了该列表，以便您的应用程序可以在开发期间连接到localhost，因此只需添加新条目即可。您可以在此answer中查看如何执行此操作。当然，这只有在您事先知道URL列表的情况下才有效，这可能不符合您的需求。在这种情况下，请查看this article。

Answer 3

如何通过重置正在使用的Android模拟器来使具有http或https url的图像源工作。

您可以通过打开android studio清除模拟器，然后单击顶部栏上的“工具”标签，选择打开后的“ AVD管理器” 选择您正在使用的仿真器，右键单击它，然后选择擦除数据。该过程完成后，在您的本机项目的根目录中打开cmd或终端 $ npx react-native run-android

React Native Image不使用特定URL

3 个答案: