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}} />

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

Answer 1

希望以下解决方案可以为您提供帮助 - 所有这些都可以用于图像

<强> 1。 HTTPS-解决方案：

您的图片由URI提供 - source={{uri:imageURI}}

示例：source={{uri: 'https://i.vimeocdn.com/portrait/58832_300x300.jpg'}}

重要提示： 别忘了将剪辑设置两次：{{}}

<强> 2。 HTTP的解决方案：

如果您想要http，请查看以下解决方案 - HTTP Github issue

解决方案： - HTTP-Solution

第3。本地图像

保存：为图像创建一个新文件夹并将其保存在本地（文件夹：图像）

要求：使用语法
要求您在本地保存的图片

var yourPicture = require ('./images/picture.jpg');

同一文件夹的表示法（＆＃39; ./'）

上述文件夹的符号（＆＃39; ../'）

上述更多文件夹的表示法（＆＃39; ../../../'）



使用：在渲染功能中使用您的图像


render(){ return( <Image source={yourPicture}/> ) }

图片的样式与您描述的一样

Answer 2

除了Jonathan Stellwag的回答之外，第一个解决方案仅在URI使用https或设置App Transport Security时才有效。

请参阅Can't show Image by URI in React Native iOS Simulator

Answer 3

添加图片代码并使用uri时，您需要检查以下内容：

为图片标记添加宽度和高度样式：
例如：
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} style={{width: 400, height: 400}} />
Image doc
使用HTTP网址：您需要启用应用传输安全性
App transport security for iOS
使用HTTPS网址：它可以正常使用

Answer 4

对于到此处的任何人，如果接受的答案对您不起作用，请确保您的图像具有正确的样式。对于uri导入的图像，您需要设置高度和宽度。

Answer 5

有关此问题的注释。从React Native 0.63.0升级到0.63.2可解决以下问题：远程图像无法在设备上的iOS 14上显示。我在寻找答案的时候发现了这个线程，因此认为它可能对同一条船上的其他人有帮助。只需升级。：）

Answer 6

更新IOS 14.x之后，正在生成一个问题，即未显示图像。这是一些有关此的信息。

添加[super displayLayer：layer]后可以显示图像；如果_currentFrame为nil

如果我理解正确，_currentFrame应该用于动画图像，因此，如果它是静止图像，我们可以使用UIImage实现来处理图像渲染，不确定是否正确。

node_modules / react-native / Libraries / Image / RCTUIImageViewAnimated.m

 if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  } else {
    [super displayLayer:layer];
  }

Answer 7

我的问题正在解决。 react-native-fs返回类似于/storage/emulated/0/Android/data/com.blah/blah.jpeg的路径，但是Image组件要求它为file:///storage/emulated/0/Android/data/com.blah/blah.jpeg

Answer 8

我遇到了完全相同的问题，我的解决方法是将您拥有的var styles = ...设置为const styles = ...，就是这样，就解决了我的问题。

Answer 9

如果使用的是RN 6.x>，则可以尝试通过https加载文件。

Answer 10

我已经卸载了以前安装的应用程序，它开始工作。

Answer 11

我来自网络的问题是我认为是uri的{{1}}参数

错误：url

正确：<Image style={styles.image} source={ { url: product.image } }/>

另外，您必须为图像元素设置<Image style={styles.image} source={ { uri: product.image } }/>和width

我花了一段时间才弄清楚

Answer 12

在iOS模拟器中为我设置样式backgroundColor会使事情搞砸。它没有显示图像，而是显示了颜色。

Answer 13

我也刚刚经历过这种情况，无法显示网址来源的<Image>。发生此问题是因为我没有连接互联网就激活了Android模拟器（Android Studio AVD）。因此，解决方案也非常简单，连接到互联网，然后激活Android仿真器并运行本机应用程序，然后瞧……url的图像已完美显示。

<Image 
   source = {{ uri: 'https://your_image_from_url.png' }}
   style = {{ height: 50, width: 50 }}
/>

Answer 14

嗯，基本上我在我的 Android 手机上遇到了同样的问题，基本上图像根本没有显示。我尝试了所有解决方案，并在想为什么它不显示图像。即使在另一个屏幕上显示图像的相同代码也能正常工作，所以我关闭了该应用程序并在 android 手机上重新安装了该应用程序。那也没有用。有时 Android 缓存系统是罪魁祸首。所以，我所做的是，

第一个解决方案

<块引用>

我转到 Android 设置中的应用程序 & 强制停止应用程序。而我又重新启动了应用程序。它开始显示一些图像，但不是全部。所以，我跳到了第二个解决方案。

第二种解决方案

<块引用>

如果您尝试了所有步骤，但仍然反应 native 的 Image 包不起作用，则安装 react-native-fast-image 库。如需了解详情，请React Native Fast Image Library...

Answer 15

对我来说，我没有注意图像风格。我使用的是 maxHeight 和 maxWidth 而不是简单的高度和宽度。希望对某人有帮助

无法在React Native中显示图像

15 个答案: