CODEWITHSUNDEEP
imagereact-nativeuri
benda
benda

Reputation: 151

How to render an image which uri is divided in react native?

I need your help.

I want to render an image which one part of the uri is static and the other part is exctracted from a JSON file. I tried the code below:

render() {
 const pic = this.props.navigation.getParam('picture');
 const pic2 = pic.toString();  
 const pic3 = 'https://static.blablabla'+ pic2; 

return(
 <View style = {styles.container}>
          <Image source = {{uri : 'pic3' }}/>
</View>

When I try directly with the https adress e.g <Image source = {{uri : ''https://static.blablabla/125/14.png' }}/>, it works.

Upvotes: 0

Views: 68

Answers (1)

Keilath
Keilath

Reputation: 456

In your code the URI of the image is the string 'pic3', not the value of the variable pic3 You should remove the quotes

render() {
  const pic = this.props.navigation.getParam('picture');
  const pic2 = pic.toString();  
  const pic3 = 'https://static.blablabla'+ pic2; 

  return(
    <View style = {styles.container}>
      <Image source = {{uri : pic3 }}/>
    </View>
  );
}

Upvotes: 1

Related Questions