CODEWITHSUNDEEP
react-nativereact-native-ios
csb00
csb00

Reputation: 1155

Image not showing on Profile Page in React Native

I am trying to get the an image to appear in one of my component folders. When I refresh the simulator, the image does not show, but it doesn't break. Anybody know why? **Another solution I tried was calling it up as a local file, but it breaks and I get the message stating that this certain path does not exist. I made sure I imported Image at the top of the page. Not sure why this is happening. 

render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Image source={{uri: 'https://fm.cnbc.com/applications/cnbc.com/resources/img/editorial/2011/08/23/23827615-simpson_homer_head'}}></Image>
        <Text>Name: Homer Simpson</Text>
        <Text>Hometown: Springfield </Text>
        <Button
          title="Go to Home"
          onPress={() => this.props.navigation.navigate("Home")}
        />
        <Button
          title="Go back"
          onPress={() => this.props.navigation.goBack()}
        />
      </View>
    );
  }
}
export default BioScreen;

enter code here

Upvotes: 0

Views: 616

Answers (2)

Aurangzaib Rana
Aurangzaib Rana

Reputation: 4252

provide height and width to image style 

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

export default class DisplayAnImage extends Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
         <Image style={{width:50, height: 60}} source={{uri: 'https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?cs=srgb&dl=beauty-bloom-blue-67636.jpg&fm=jpg'}}></Image>
        <Text>Name: Homer Simpson</Text>
        <Text>Hometown: Springfield </Text>
      </View>
    );
  }
}

Upvotes: 0

fayeed
fayeed

Reputation: 2485

In React native when you are loading in a remote image using a URI you need to explicitly provide height and width to the image component otherwise it will set the height and width to 0 so all you have to do is provide a height and width in style of the Image Component.

Upvotes: 2

Related Questions