Image uri not working as expected - React Native

0
votes

I am learning React Native. Following the guide, Getting Started of Facebook ( https://facebook.github.io/react-native/docs/props ). When I tried to make a new component containing an image sometimes works and sometimes not. I have read online that this is due to how they are load, React Native doesn't support dynamic loading of images.

class CuteImage extends Component {
  render() {

    return (
      <View>
        <Image source={{uri: 'https://cdn1.medicalnewstoday.com/content/images/articles/322/322868/golden-retriever-puppy.jpg'}} />
      </View>
    );
  }
}

export default class ExampleComponent extends Component {
  render() {
    return (
      <View style={{alignItems: 'center', justifyContent: 'center', flex: "1", flexDirection: "column"}}>
        <CuteImage />
      </View>
    );
  }
}

I expected this to work fine because in the Image Component tutorial they did something similar and it had worked ( https://facebook.github.io/react-native/docs/image ) but it throws me the following error:

Failed to construct 'Image': Please use the 'new' operator

Why is this happening? How dynamic and static loading relates to this?

1
imagereact-nativejsx

1 Answers

2
votes

I think you forgot to add dimensions for your image. The docs say here that you have to provide them when using network and data images. I attached a screenshot of the result, it works now.

<View>
    <Image style={{width: 380, height: 340} } source={{uri: 'https://cdn1.medicalnewstoday.com/content/images/articles/322/322868/golden-retriever-puppy.jpg'}} />
</View>

Cheers.

App screenshot