ios 无法在 React Native 中显示图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38114325/
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 in React Native
提问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.
为图像分配的空间在那里，但没有显示图像。
采纳答案by Fredric Sanjaya
In addition to Jonathan Stellwag's answer, the 1st solution only works if the URI is using https, or by setting the App Transport Security.
除了 Jonathan Stellwag 的回答之外，第一个解决方案仅在 URI 使用 https 或通过设置 App Transport Security 时才有效。
回答by Jonathan Stellwag
Hope the following solutions can help you - all can be used for Image
希望以下解决方案可以帮助您 - 都可以用于 Image
1. HTTPS-Solution:
1.HTTPS-解决方案：
- Your picture is provided by an URI -
source={{uri:imageURI}}- Example:
source={{uri: 'https://i.vimeocdn.com/portrait/58832_300x300.jpg'}}- Important:Dont forget to set the clip twice: {{}}
- 您的图片由 URI 提供 -
source={{uri:imageURI}}- 例子：
source={{uri: 'https://i.vimeocdn.com/portrait/58832_300x300.jpg'}}- 重要提示：不要忘记设置剪辑两次：{{}}
2. HTTP-Solution:
2. HTTP-解决方案：
- If you want http look the following solution - HTTP Github issue
- The solution: - HTTP-Solution
- 如果你想要 http 查看以下解决方案 - HTTP Github 问题
- 解决方案： - HTTP-Solution
3. Local-Picture
3. 本地图片
- Save: Create a new folder for your images and save them locally there (folder: images)
- Require: Require the picture you saved locally by using the among syntax
- 保存：为您的图像创建一个新文件夹并将它们保存在本地（文件夹：图像）
- Require：需要你本地保存的图片，使用with语法
var yourPicture = require ('./images/picture.jpg');
var yourPicture = require ('./images/picture.jpg');
- Notation for the same folder ('./')
- Notation for the above folder ('../')
- Notation for more folder above ('../../../')
- 同一文件夹的符号（'./'）
- 上述文件夹的符号（'../'）
- 上面更多文件夹的符号（'../../../'）
- Use: Use your image in the render function
- 用途：在渲染功能中使用您的图像
render(){
return(
<Image source={yourPicture}/>
)
}
The style of your images works as you described
您的图像风格如您所描述的那样工作
回答by Belal mazlom
When adding Image tag and use uriyou need to check following things:
添加 Image 标签并使用时，uri您需要检查以下事项：
Adding width and height style for Image tag:
ex:<Image source={{uri: 'https://reactjs.org/logo-og.png'}} style={{width: 400, height: 400}} />
Image docUsing HTTP urls: you will need to enable app transport security
App transport security for iOSUsing HTTPS urls: it will work normally
回答by Lucas Bernardo
To anyone getting here, if the accepted answer didn't work for you, make sure your image has proper styling. For uri imported images, you'll need to set both height and width.
对于到达这里的任何人，如果接受的答案对您不起作用，请确保您的图像具有正确的样式。对于 uri 导入的图像，您需要设置高度和宽度。
回答by Kostiantyn
My issue was in path. react-native-fsreturns path like /storage/emulated/0/Android/data/com.blah/blah.jpegbut Imagecomponents requires it to be file:///storage/emulated/0/Android/data/com.blah/blah.jpeg
我的问题出在路径上。react-native-fs返回路径类似/storage/emulated/0/Android/data/com.blah/blah.jpeg但Image组件要求它是file:///storage/emulated/0/Android/data/com.blah/blah.jpeg
回答by Jonas Weimar
I had exactly the same problem and my solve was to set what you've got as var styles = ...to const styles = ...and that's it this solved my problem.
我有完全相同的问题，我的解决是建立你有什么作为var styles = ...对const styles = ...，这就是它这个解决我的问题。
回答by Murat ?imen
If you are using RN 6.x> , you can try loading files over https.
如果您使用的是 RN 6.x> ，您可以尝试通过 https 加载文件。
回答by amit pandya
I have uninstalled the previously installed app and it started working.
我已经卸载了以前安装的应用程序，它开始工作了。
