CODEWITHSUNDEEP
react-nativeexpo
Learner
Learner

Reputation: 35

Image not showing in react-native in a physical device

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.

Upvotes: 3

Views: 2769

Answers (2)

Roc&#237;o Garc&#237;a Luque
Roc&#237;o Garc&#237;a Luque

Reputation: 3847

For people coming from Google: if your image is an SVG, check SvgUri component from react-native-svg:

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

Upvotes: 1

Kartikey
Kartikey

Reputation: 4992

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

Upvotes: 3

Related Questions