无法在React Native中显示图像

Question

我正在使用react-native 0.28.0。

我尝试按照此教程在iPhone模拟器上显示图像：React Native入门：使用JavaScript构建iOS应用 | 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}} />

已分配图像的空间，但未显示图像。

- Fredric

---

在我的情况下，一切都正常，只是我从react-native-elements导入了图像，而不是从react-native导入，以便它不会显示出来。你是否正确地像这样从react-native导入了Image？import {Image} from 'react-native'; - Engin Yilmaz

Answer 1

希望以下解决方案能帮到您——都可以用于图像

1. HTTPS解决方案：

1. 利用URI提供图片 source={{uri:imageURI}}
2. 例如：source={{uri: 'https://i.vimeocdn.com/portrait/58832_300x300.jpg'}}
3. 重要提示：别忘了设置两次剪辑：{{}}

2. HTTP解决方案：

1. 如果您想使用http，请参考以下解决方案-HTTP Github 问题

3. 本地图片

1. 保存：为您的图像创建一个新文件夹并将它们保存在那里（文件夹：images）
2. 需要：使用下列语法要求您本地保存的图片

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

• 同一文件夹的表示法 ('./')
• 上一级文件夹的表示法 ('../')
• 更高级别文件夹的表示法 ('../../../')

3. 使用：在render函数中使用您的图像

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

你的图片风格符合你所描述的。

- Jonathan Stellwag

---

是的，我已经设置了imageURI并使用了双括号{{}}，但图片没有显示出来。 - Fredric

如果明天还没有更好的解决方案，我会再次寻找。但是我认为这可能是解决方案 - 我将测试并向您反馈。 - Jonathan Stellwag

第二个解决方案可行。谢谢！ 第一个解决方案（通过URI获取图片）不起作用。 - Fredric

嘿 :) 很高兴第二个解决方案对你有用。我现在测试了第一个解决方案，在我的应用程序中运行得非常好。如果您想使用它，可以检查两件事情：1. 确保有可用的互联网连接。2. 完全从设备中删除该应用程序并重新启动 - 可能是缓存问题。 - Jonathan Stellwag

谢谢您的建议。我按照您的建议做了，1.互联网可用。2.完成。但是图片没有显示。在Xcode项目中可能有任何权限可以显示来自互联网的图像吗？ - Fredric

Answer 2

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

• 为图像标签添加宽度和高度样式：
  例如：
  <Image source={{uri：'https://reactjs.org/logo-og.png'}} style={{width: 400, height: 400}} />
  图像文档

• 使用HTTP URL：您需要启用应用程序传输安全性
  iOS的应用程序传输安全性

• 使用HTTPS URL：它将正常工作

- Belal mazlom

---

我正在使用HTTPS，但是在测试环境中我的远程图片都无法显示，但是在本地部署中它们可以正常显示。我不知道为什么会这样，请问有什么帮助吗？ - Pxaml

Answer 3

如果你来到这里，并且接受的答案对你没有用，那么请确保你的图片设置正确的样式。对于导入uri的图片，你需要同时设置高度和宽度。

- Lucas Bernardo

---

谢谢，我的图片没有高度，所以它不可见。 - Dark Matter

Answer 4

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

请参见：无法在React Native iOS模拟器中通过URI显示图像。

- Fredric

---

我遇到了同样的问题，加上了“s”之后就解决了！ - bstras21

Answer 5

在更新IOS 14.x后，出现了图像未显示的问题。

以下是一些相关信息。

如果_currentFrame为空，可以通过添加[super displayLayer:layer];来显示图像。

如果我理解正确，_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];
  }

- Soban Arshad

Answer 6

关于这个问题的旁注。从React Native 0.63.0升级到0.63.2可以解决在iOS 14设备上远程图片无法显示的问题。我在寻找答案时发现了这个帖子，所以觉得可能会对其他有同样困扰的人有所帮助。只需要升级即可。

- kevincoleman

---

在0.63.1上遇到了相同的问题，升级到0.63.2解决了它。 - Serg Chernata

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。

- Kostiantyn

Answer 8

我也遇到了同样的问题，无法从url源中显示<Image>。这个问题是因为我启用了Android模拟器（Android Studio AVD），但是没有连接到互联网导致的。解决方法也很简单，连接到互联网后再启用Android模拟器和运行React Native应用程序，然后就可以完美地显示来自url的图像了。

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

- Lintang Wisesa

---

当然。我重新启动了我的 Android 模拟器现在可以工作了。谢谢。 - chidimo

Answer 9

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

- Murat Çimen

Answer 10

如果您不想强制使用https，我尝试修改我的ios/{app}/Info.plist中的此部分，问题得到了解决。

<key>NSAppTransportSecurity</key>
<dict>
    <!-- Added this line -->
    <key>NSAllowsArbitraryLoads</key>
    <true/>
    <!-- END -->
    <key>NSExceptionDomains</key>
    <dict>
        <key>localhost</key>
        <dict>
            <key>NSExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>
</dict>

- Praise