Question

我使用react-native 0.28.0

我试图根据本教程在iPhone模拟器上显示图像：http://www.appcoda.com/react-native-introduction/

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作为源显示图片？

Answer 1

问题是您正在尝试从http连接加载图像，而不是从苹果要求的https连接加载图像。
如果您的代码与另一个使用https而不是http的uri一起使用，请尝试使用。在Android中，它应该可以正常使用http或https 了解更多信息 https://github.com/facebook/react-native/issues/8520和http://www.techrepublic.com/article/wwdc-2016-apple-to-require-https-encryption-on-all-ios-apps-by-2017/。

如果您真的想通过http加载某些内容，可以编辑info.plist文件并在那里添加例外。更详细的信息https://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/

另请参阅我的stackoverflow问题：React-native loading image over https works while http does not work

Answer 2

以下是图片中汉堡图标的示例代码 -

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

有关详细信息，请参阅此处 - https://facebook.github.io/react-native/docs/image.html

Answer 3

只需在字段中编辑list.info文件：＆＃34; NSAppTransportSecurity＆＃34; 到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>

Answer 4

你有没有尝试用uri包装它？：

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

Answer 5

以下是一种了解图像是否显示的可能方法：复制图像uri并将其粘贴到浏览器（Safari，Chrome等）中->如果看不到图像，则手机可能不会显示该图像

无法在React Native iOS模拟器中按URI显示图像

5 个答案: