在物理设备的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

您必须提供Dimensions到remote图像才能显示它们。与静态资源不同，您需要手动指定远程图像的图像尺寸。

例如-

<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.

工作示例

Answer 2

对于来自Google的人:如果您的图像是SVG，请检查react-native-svg中的SvgUri组件:

<SvgUri
width="50"
height="50"
uri="https://images.com/your.svg"
/>