无法在 React Native 中显示图像答案

【问题标题】：Can't show Image in React Native无法在 React Native 中显示图像
【发布时间】：2016-11-02 00:44:25
【问题描述】：

我正在使用 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}} />

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

【问题讨论】：

标签： javascript ios react-native

【解决方案1】：

希望以下解决方案可以帮助您 - 都可以用于图像

1. HTTPS-解决方案：

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

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

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

2。 HTTP-解决方案：

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

3.本地图片

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

Require: 需要你使用among语法在本地保存的图片

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

同一文件夹的表示法 ('./')
上述文件夹的符号 ('../')
上面更多文件夹的符号 ('../../../')

用途：在渲染函数中使用您的图像

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

图片的风格与您描述的一样

【讨论】：

是的，我确实设置了 imageURI 并使用了双括号 {{}}（编辑了问题）但是图片没有显示。
如果到明天还没有更多的解决方案，我会再次寻找。但我认为这将是解决方案 - 我会对其进行测试并向您提供反馈。
第二种解决方案有效。谢谢！第一种解决方案（通过 URI 获取图片）不起作用。
嘿 :) 我很高兴第二个解决方案适合你。我现在测试了 1. 解决方案，它在我的应用程序中运行良好。如果你想使用它，你可以检查两件事： 1. 确保互联网连接可用。 2. 从您的设备中彻底删除应用程序并重新启动它 - 可能是缓存问题。
感谢您的建议。我按照你的建议做了， 1. 可以上网。 2. 完成。但图像不显示。 Xcode 项目中是否有任何权限显示来自互联网的图像？

【解决方案2】：

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

为图片标签添加宽度和高度样式：
例如：
<Image source={{uri: 'https://reactjs.org/logo-og.png'}} style={{width: 400, height: 400}} />
Image doc
使用 HTTP url：您需要启用应用程序传输安全性
App transport security for iOS
使用HTTPS url：正常工作

【讨论】：

IM 使用 https 并且我的远程图像都没有在试飞中显示。但它们显示在我的本地部署中。我不知道为什么。有什么帮助吗？

【解决方案3】：

除了 Jonathan Stellwag 的回答之外，第一个解决方案仅在 URI 使用 https 或通过设置应用程序传输安全性时才有效。

见Can't show Image by URI in React Native iOS Simulator

【讨论】：

我遇到了同样的问题并添加了's'然后它工作了！

【解决方案4】：

对于任何来到这里的人，如果接受的答案不适合您，请确保您的图片具有正确的样式。对于 uri 导入的图像，您需要同时设置高度和宽度。

【讨论】：

【解决方案5】：

更新 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];
  }

【讨论】：

【解决方案6】：

我也刚刚经历过，无法从 url 源显示 <Image>。出现问题是因为我激活了 Android 模拟器（Android Studio AVD），但没有连接到互联网。所以解决方案也很简单，连接到互联网然后激活 Android 模拟器并运行 react native 应用程序，瞧……来自 url 的图像已经完美显示了。

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

【讨论】：

当然。我重新启动了我的android模拟器，它现在可以工作了。谢谢

【解决方案7】：

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

【讨论】：

【解决方案8】：

关于这个问题的附注。从 React Native 0.63.0 升级到 0.63.2 修复了远程图像在设备上的 iOS 14 上不显示的问题。我在搜索它的答案时发现了这个线程，所以认为它可能会帮助同一条船上的其他人。只是升级。 :)

【讨论】：

在 0.63.1 上遇到同样的问题，升级到 0.63.2 解决了它

【解决方案9】：

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

【讨论】：

【解决方案10】：

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

【讨论】：

【解决方案11】：

我来自网络的问题是 uri 参数，我认为是 url

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

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

另外，您必须将 width 和 height 设置为图像元素

我花了一段时间才弄明白

【讨论】：

【解决方案12】：

在 iOS 模拟器中设置 backgroundColor 风格让我搞砸了。它没有加载图像，而是显示颜色。

【讨论】：

【解决方案13】：

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

第一种解决方案

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

第二个解决方案

如果您尝试了所有步骤，但仍然无法使用 react native 的 Image 包，请安装 react-native-fast-image 库。更多详情，React Native Fast Image Library...

【讨论】：

【解决方案14】：

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

【讨论】：

【解决方案15】：

还要确保您的测试设备互联网正常工作，否则它将显示白色图像而不是给出任何错误。

【讨论】：

请添加更多详细信息以扩展您的答案，例如工作代码或文档引用。
这并没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker.

【解决方案16】：

无法在 React Native 中显示图像

临时解决方案：-在真实设备中调试您的应用程序使用 URL 显示图像

【讨论】：