图像未在物理设备中以 react-native 显示

Question

我是 React Native 的初学者。我今天开始学习它。我试图在屏幕上显示图像，但我遇到了一些问题。

我的代码

import React from 'react';
import { Text, View, TouchableOpacity, Image } from 'react-native';

export default function App() {
  return (
    <View>
      <Image source={{ uri: 'https://i.imgur.com/G1iFNKI.jpg' }} />
    </View>
  );
}

当我在浏览器中转到此 URL 时，它显示图像，但在设备中没有成功。

当我在本地下载并使用它时，同样的图像，然后就可以了

import React from 'react';
import { Text, View, TouchableOpacity, Image } from 'react-native';

export default function App() {
  return (
    <View>
      <Image source={require('./assets/myViewScene.jpg')} />
    </View>
  );
}

感谢任何帮助。

Answer 1

您必须向 remote 图片提供 Dimensions 才能显示它们。正如文档中所述 here、与静态资源不同，您需要为远程图像手动指定图像尺寸。

例如-

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

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

<Image source={require("./path_to_local_image")} />
// This will load perfectly and the image will be shown even if you don't provide the Dimensions.

Working Example Here

图像未在物理设备中以 react-native 显示

Image not showing in react-native in a physical device

react-native

expo