React Native: 在 Android 上无法显示 URI 图像，但在 iOS 模拟器上可以显示。

Question

我正在开发一个React Native应用程序。我从API中获取一些图片，并将它们显示为一个平面列表。问题是这些图片在iOS模拟器上显示得很好，但在Android模拟器上却无法显示。我已经为这些图片设置了宽度和高度，但问题仍然存在。
以下是代码：
组件

 <Image
          style={styles.image}
          source={{
            uri: image,
          }}
          resizeMode="contain"
        />

样式

container__image: {
    width: '100%',
  },
  image: {
    width: '100%',
    height: 200,
    resizeMode: 'contain',
  },

在uri前面的image是一个包含图像的http地址的属性。

- Ali Raza

Answer 1

我不依赖于Android模拟器来处理来自URL的图像，尤其是那些来自API的图像。通常情况下，硬编码的URL都能正常工作。

然而，我注意到iOS模拟器在这方面给出了与iPhone类似的结果。但对于Android来说并非如此。当从API获取图像，并将其存储在手机上的存储逻辑/AsyncStorage中时，我注意到真实的Android设备显示的图片要比Android模拟器多得多。花费了很长时间才找到为什么“图像在Android上无法工作，但在iOS上可以工作”的原因，Stack Overflow上有很多相关话题。显然，它们确实可以工作，但只在真实设备上...是的，在调试过程中，我检查了http和https。这些图像是通过https提供的。我还设置了宽度和高度。

有点令人沮丧，但我很好奇是否还有其他人遇到过这个问题。

- Daniel Danielecki

Answer 2

我也遇到过同样的问题，但当我退出模拟器中的应用程序并重新打开它时，问题就解决了。虽然这不是最好的解决方案，但我猜这能解决问题。

- Shika

---

这并没有真正回答问题。如果您有不同的问题，可以通过点击提问来提出。如果您想在此问题获得新的答案时得到通知，您可以关注此问题。一旦您拥有足够的声望，您还可以添加悬赏以吸引更多关注。- 来自审核 - Meet Bhalodiya

Answer 3

一些来到这里的人，这可能对他们有用。

你提供的属性可能有问题：

为了让Android和iOS都能工作，属性应该是“uri”。 只有iOS的属性是“url”。这样做不会在Android上加载图片，甚至不会发起网络请求。

- Asad Mehmood

Answer 4

你能解决这个问题吗？ 我也遇到了同样的问题，我通过以下步骤解决了它：

1. 关闭 Android 模拟器
2. cd android && ./gradlew clean
3. 在 Android Studio 设备管理器中清除数据

然后运行 react-native start --reset-cache && react-native run-android

- toto

---

仍然没有帮助。 - not_fubar_yet

Answer 5

尝试在引号（单引号或双引号）中提供直接链接的URI。这可能适用于安卓，并且您的resizemode也必须在样式中。

        <Image
          style={styles.image}
          source={{
          uri: 'https://reactnative.dev/img/tiny_logo.png',
          }}
        />

- Bala Vigness

---

我尝试过了。在 Android 模拟器上不起作用，在 iOS 模拟器上可以。设置宽度为 100，高度为 100。我还尝试了调整模式为 cover/contain，但没有显示任何图像。 - not_fubar_yet

Answer 6

可能是存储权限的问题。

在手机上检查应用程序详细信息，并向应用程序授予存储权限。

- hkniyi

Answer 7

可能出现的问题是因为Android不允许使用http。

请在更改以下Android设置后构建一个新的Android。

• android/app/src/main/AndroidManifest.xml

<application
        android:usesCleartextTraffic="true"> // you add this
...
</application>

- hong developer

---

抱歉，我拼错了它的 https。 - Ali Raza

以下代码对我有效： `import React from 'react'; import {View, Image} from "react-native";export default function App() { let image = 'https://digidrip-dev.s3.us-west-1.amazonaws.com/1641987422138-image.png' return( <View> <Image style={{ width: '100%', height: 200, resizeMode: 'contain' }} source={{ uri: image, }} resizeMode="contain" /> </View> )}` - Sam Dani

我已经硬编码了这些值，但在iOS上运行良好，在Android模拟器上却没有显示任何内容。 - Ali Raza

@AliRaza 没问题。这是一个例子 https://snack.expo.dev/U3npZ0Sj1H - hong developer

问题是它在IOS上运行良好，但在安卓上不行。 - Ali Raza