图片不显示 React native Expo

Question

React 本机代码

<View style={styles.container}>
      <View style={styles.carlist}>
        {api.map((item, key) => (
          <View key={item.brand} style={styles.photo}>
            <Text>{item.brand}</Text>
            <Image source={{ uri: item.logo }} />
          </View>
        ))}
      </View>
    </View>

JSON 文件数据

    {
    "brand": "Volvo",
    "logo":"https://1drv.ms/u/s!AiyE3dAIjI8lgRtQot0nBaNTeCLb?e=O2r7fz",
    "models" :[
        {
            "name":"XC90",
            "link":"https://1drv.ms/u/s!AiyE3dAIjI8lgV6XcQOmso1W2rta?e=wXTM4d"
        },
        {
            "name":"XC60",
            "link":"https://1drv.ms/u/s!AiyE3dAIjI8lgWjRXFT6G9NEzbS4?e=ELJ4HZ"
        },
        }

URL 已正确提供，但图像未出现在屏幕上。图像存储在一个驱动器中。我也尝试过使用互联网上的图片，但其中 none 出现在屏幕上。我想获取 JSON 数据并以网格形式显示它，如果任何有助于此的内容也有帮助的话。 Expo 文档显示它是这样的，但在循环中它没有出现。

Answer 1

您尝试加载的 image 需要一个 Authorization。是的，如果您在浏览器中粘贴 URL，它会显示，但对于 Image 组件，您需要来自 OneDrive 的某种 Authorization。这就是它未加载的原因。

阅读有关图片的更多信息 Headers here

还要确保为图像提供尺寸以显示它们。正如文档中所述 here、与静态资源不同，您需要手动指定图像的尺寸。

例如-

<Image source={{ uri: SomeURI }} />
// This will not load and the image would not be shown.

<Image source={{ uri: SomeURI }} style={{ width: 100, height: 100 }} />
// This will load perfectly and the image will be shown.

Working Example Here

图片不显示 React native Expo

Image not Showing React native Expo

json

react-native

expo