image - unable to load image in react native

Question

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?

标签： imagereact-native

Answer 1

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

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