无法在 React Native iOS 模拟器中按 URI 显示图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38136981/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can't show Image by URI in React Native iOS Simulator
提问by Fredric Sanjaya
I'm using react-native 0.28.0
我正在使用 react-native 0.28.0
I'm trying to show an image on iPhone simulator according to this tutorial: http://www.appcoda.com/react-native-introduction/
我正在尝试根据本教程在 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'
Then in the render()function, I add this:
然后在render()函数中，我添加了这个：
<Image style={styles.image} source={{uri:imageURI}} />
The space allocated for the image is there, but the image is not shown.
为图像分配的空间在那里，但没有显示图像。
However, if I use local image instead, the image will be shown.
但是，如果我改用本地图像，则会显示图像。
var Picture = require('./content.jpeg')
In render()function:
在render()功能上：
<Image source={Picture} style={styles.thumbnail} />
How can I show picture using URI as source?
如何使用 URI 作为源显示图片？
回答by Orlando
The problem is that your are trying to load the image from a http connection and not from a https connection as it is demanded by apple.
Try if your code works with another uri which uses https instead of http.
In Android it should work fine with either http or https.
Read more at
https://github.com/facebook/react-native/issues/8520and http://www.techrepublic.com/article/wwdc-2016-apple-to-require-https-encryption-on-all-ios-apps-by-2017/.
问题是您正在尝试从 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/。
If you really want to load something over http you can edit the info.plist file and add your exception there. More detailed info here https://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/
如果你真的想通过 http 加载一些东西，你可以编辑 info.plist 文件并在那里添加你的例外。更详细的信息在这里https://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/
See also my stackoverflow question here: React-native loading image over https works while http does not work
另请参阅我的 stackoverflow 问题：React-native loading image over https 有效而 http 无效
回答by Hoat V. Ha
just edit list.info file at field: "NSAppTransportSecurity"into ios of React Native such as:
只需将字段中的 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>
回答by Dlucidone
Here is a sample code for Hamburger icon in image-
这是图像中汉堡包图标的示例代码-
<Image source={{ uri: 'http://i.imgur.com/vKRaKDX.png', width: 32, height: 32, }} />
for more info you can refer here-https://facebook.github.io/react-native/docs/image.html
有关更多信息，您可以参考这里 - https://facebook.github.io/react-native/docs/image.html
回答by alivanov
Here is a possible way on how to know if your image will be displayed: copy image uri and paste it to you browser (safari, chrome, etc) -> if you do not see your image, then it probably won't displayed by your phone
以下是如何知道您的图像是否会显示的可能方法：复制图像 uri 并将其粘贴到您的浏览器（safari、chrome 等）-> 如果您没有看到您的图像，则它可能不会显示您的手机
回答by mstearne
Have you tried wrapping it in uri: ?
您是否尝试将其包装在 uri: 中？
<Image source={{uri: imageURI}} style={styles.thumbnail} />
