图片未显示 React Native Expo

Posted 2023-02-16

【中文标题】图片未显示 React Native Expo

【英文标题】：Image not Showing React native Expo

【发布时间】：2021-10-27 13:54:14

【问题描述】：

反应原生代码

<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 正确，但图像未显示在屏幕上。图像存储在一个驱动器中。我也尝试过使用互联网上的图像，但没有一个出现在屏幕上。如果任何有助于此的内容也有帮助，我想获取 JSON 数据并以网格形式显示它。 Expo Documentation 显示它是这样的，但在循环中它没有出现。

【问题讨论】：

您尝试加载的image 需要Authorization。这就是它没有加载的原因。

【参考方案1】：

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

阅读更多关于图片标题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

【讨论】：

谢谢，我缺少样式元素，而且一个驱动器有一个单独的 URL 用于嵌入，这对我有用