Why image from JSON is not rendered in image tag in react native?

Question

I have a json file

{
        "name": "SAM",
        "id": "001",
        "default_image":"../assets/image.jpeg"
}

In my component, I set a state called profile_image with this data called default_image, but when I use it like this, it throws an error.

<Image 
    style={styles.image} 
    source={{uri: this.state.profile_image}}/>

I have given width and height but still it throws an error. I have even tried all these possible formats but no success.

<Image 
    style={styles.image} 
    source={{this.state.profile_image}}/>

<Image 
    style={styles.image} 
    source={require(this.state.profile_image)}/>

`let a = this.state.profile_image` and `source={require(a.default_image)}` — hong developer, Apr 25 '19 at 15:44
try to alert the path for the image and check whether you are getting the image or not? — HarshitMadhav, Apr 25 '19 at 16:09
Moreover, mention the error in the question. I am sure it will not be the syntax error.. — HarshitMadhav, Apr 25 '19 at 16:10

score 0 · Answer 1 · answered Apr 25 '19 at 16:20

When using uri to display the image it is displayed using this:

<Image style={{width:120, height:80,  marginTop:15,alignSelf:'center'}}
source={{uri: this.state.avatarSource}}/>

So, you are not making any syntax error here.

The problem is with the path of the image you are giving from JSON

Try changing your JSON to this:

{
        "name": "SAM",
        "id": "001",
        "default_image":"/assets/image.jpeg"
}

Why image from JSON is not rendered in image tag in react native?

1 Answers1