CODEWITHSUNDEEP
imagereact-native
Aakash Thoriya
Aakash Thoriya

Reputation: 25

unable to load image in react native

I want to load the image from a specific URL ['https://gym.weybee.in/files/ProfilePicture']

where ProfilePicture is a variable name which contains the name of the image.

variable declared as => let ProfilePicture = this.props.navigation.getParam("myJSON5");

[myJSON5 contain the name of the image for particular user]

this is my code

    const {goBack} = this.props.navigation;
    let ProfilePicture = this.props.navigation.getParam("myJSON5");
    //myJSON5 contain name of image

    return (
      <Block flex style={styles.profile}>
        <Block flex>
          <ImageBackground
            source={Images.ProfileBackground}
            style={styles.profileContainer}
            imageStyle={styles.profileBackground}
          >
            <ScrollView
              showsVerticalScrollIndicator={false}
              style={{ width, marginTop: '17%' }}
            >
              <Block flex style={styles.profileCard}>
                <Block middle style={styles.avatarContainer}>
                  <Image
                    source={{uri: 'https://gym.weybee.in/files/ProfilePicture'}}
                    //all images are here =>> https://gym.weybee.in/files/
                    style={styles.avatar}
                  />
                    <Image
                    source={{ uri: fitness.png }}
                    style={styles.avatar}
                  />
                </Block>

Error

there is no error but the image is not load

** another query**

how can show an error message if the image is not loaded?

Upvotes: 0

Views: 477

Answers (2)

himangi
himangi

Reputation: 804

you can use as below

let ProfilePicture = this.props.navigation.getParam("myJSON5");

let pic = {uri:'https://gym.weybee.in/files/'.concat(ProfilePicture)

or

let pic = {uri:'https://gym.weybee.in/files/'.concat({this.props.navigation.getParam("myJSON5")}) };

 <Image source={pic}/>

Upvotes: 1

yangguang1029
yangguang1029

Reputation: 1823

you didn't connect the uri string correctly, try this:

source={{uri: `https://gym.weybee.in/files/${ProfilePicture}`}}

Upvotes: 2

Related Questions