Image not showing in react-native in a physical device-CodePudding

I am a beginner in React Native. I started learning it today. I was trying to display an image on the screen but I am having some problems here.

my Code

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>
  );
}

when I go to this URL in the browser it shows the image, but no success in the device.

The same image when I download and use it locally, then it works

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>
  );
}

Any help is appreciated.

CodePudding user response：

You will have to provide Dimensions to the remote images in order to show them. As mentioned in the docs here, Unlike with static resources, you will need to manually specify the dimensions of your image for remote images.

For Example -

<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