无法在 React Native iOS Simulator 中按 URI 显示图像答案

【问题标题】：Can't show Image by URI in React Native iOS Simulator无法在 React Native iOS Simulator 中按 URI 显示图像
【发布时间】：2016-11-03 08:50:11
【问题描述】：

我正在使用 react-native 0.28.0

我正在尝试根据本教程在 iPhone 模拟器上显示图像：

Introduction to React Native: Building iOS Apps with JavaScript | Appcoda

var styles = StyleSheet.create({
image: {
    width: 107,
    height: 165,
    padding: 10
  }
}

var imageURI = 'http://books.google.com/books/content?id=PCDengEACAAJ&printsec=frontcover&img=1&zoom=1&source=gbs_api'

然后在render()函数中，我添加了这个：

<Image style={styles.image} source={{uri:imageURI}} />

为图像分配的空间在那里，但图像不显示。

但是，如果我改用本地图像，则会显示图像。

var Picture = require('./content.jpeg')

在render()函数中：

<Image source={Picture} style={styles.thumbnail} />

如何使用 URI 作为来源显示图片？

【问题讨论】：

和你一样的问题，从你接受的答案中解决了，非常感谢。

标签： ios react-native

【解决方案1】：

问题是您尝试从 http 连接加载图像，而不是按照 Apple 的要求从 https 连接加载。

尝试您的代码是否与另一个使用 https 而不是 http 的 uri 一起工作。在 Android 中，它应该适用于 http 或 https。

如果你真的想通过 http 加载一些东西，你可以编辑 info.plist 文件并在那里添加你的异常。更详细的信息在这里：Configuring App Transport Security Exceptions in iOS 9 and OSX 10.11。

也可以在这里查看我的 StackOverflow 问题：React-native loading image over https works while http does not work。

【讨论】：

【解决方案2】：

这是图像中汉堡图标的示例代码-

<Image source={{ uri: 'http://i.imgur.com/vKRaKDX.png', width: 32, height: 32, }} />

更多信息可以参考这里-https://facebook.github.io/react-native/docs/image.html

【讨论】：

我尝试了该示例代码，但它在我的 iPhone 6 Simulator (iOS 9.3) 中不起作用
你在require中添加了图片组件吗？
谢谢，Dlucidone。实际上在 info.plist 中添加 App Transport Security 设置可以解决问题。

【解决方案3】：

只需将 list.info 文件的字段："NSAppTransportSecurity" 编辑到 React Native 的 ios 中，例如：

<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>localhost</key>
        <dict>
            <key>NSExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
        <key>resizing.flixster.com</key>
        <dict>
            <!--Include to allow subdomains-->
            <key>NSIncludesSubdomains</key>
            <true/>
            <!--Include to allow HTTP requests-->
            <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
            <true/>
            <!--Include to specify minimum TLS version-->
            <key>NSTemporaryExceptionMinimumTLSVersion</key>
            <string>TLSv1.1</string>
        </dict>
    </dict>
</dict>

【讨论】：

【解决方案4】：

我从另一个堆栈溢出问题中找到了解决方案。它解决了我的问题是图像之前显示但有时它没有显示在 IoS 模拟器中。下面的答案解决了我的问题

React-native iOS not showing images (pods issue)

感谢@gyan deep

【讨论】：

【解决方案5】：

你试过用 uri: 包装它吗？

<Image source={{uri: imageURI}} style={styles.thumbnail} />

【讨论】：

是的，正如我在问题中提到的那样，我将它包装在 uri 中。我也尝试按照您的答案显示更改顺序，但图像仍然没有显示。

【解决方案6】：

以下是一种可能的方法来了解您的图像是否会显示：复制图像 uri 并将其粘贴到您的浏览器（safari、chrome 等）-> 如果您没有看到您的图像，那么您的手机可能不会显示它

【讨论】：