Unable to get Image from JSON API in react-native

Question

I am new in react-native and I m trying to get Image url from JSON API.When i run my code i got an error "source is undefined".So i just want to know that how can i get my Image url from JSON API.I am able to fetch the response of URL please check my code .

    async componentDidMount() {
    const DEMO_TOKEN = await AsyncStorage.getItem('isLoggedIn');
        const url11 = 'http://104.197.28.169:3000/userProfile';
        fetch(url11,{
            method: 'GET',
            headers: {
                Authorization: 'Bearer ' + DEMO_TOKEN,
            },
            //Request Type
        })
            .then(response => response.json())
            .then(responseJson => {
                console.log('UserProresponse', responseJson)
                this.setState({
                    dataSource : responseJson,
                    isLoading: false,
                });
            })
            .catch(error => console.log(error));
    }

  <View style={styles.imageView}>
                            <Image style={styles.logoImg}
                                source={require(this.state.dataSource.data.photograph)}>
                              </Image>
   </ VIew>

I am getting this console.log response.Here I am able to get the "firstName" , but I am unable to get the "photograph" from this response.Please check.

 {
 "message": "user profile",
"data": {
    "id": 1,       
    "firstName": "Mohd",
    "lastName": "Akram",
    "dateOfBirth": "1995-08-25",
    "gender": "male",
    "maritalStatus": "unmarried",       
    "photograph": "images/2020-04-28T10-37-21.149Zdutch.png",        
    "userId": 2,
 },
"status": 1
}

"images/2020-04-28T10-37-21.149Zdutch.png" is this the location of your image locally? — Goskula Jayachandra, Apr 29 '20 at 09:51
Yes,This is the response of JSON API.This is the JSON API in which the admin can upload the profile for the employee so I just want to get an employee profile from this API. — Rohit, Apr 29 '20 at 10:50
Is your image is hosted some where or you just saving the path of the images — Goskula Jayachandra, Apr 29 '20 at 11:16
sorry, I did not understand.what is the right code according to you ? Please explain. — Rohit, Apr 29 '20 at 14:13
Yes sir, but if I open the user profile on another device then the image also wants to be shown on that device — Rohit, Apr 30 '20 at 05:30
When you save a local path of a file you need to save it as like this require("images/2020-04-28T10-37-21.149Zdutch.png") in your db check this:https://stackoverflow.com/questions/44991669/react-native-require-with-dynamic-string — Goskula Jayachandra, Apr 30 '20 at 09:16

score 0 · Answer 1 · answered Apr 29 '20 at 04:20

You should use uri: if get from internet or server.

example :

<Image source={{uri: this.state.dataSource.data.photograph}} style={{width:200, height: 200}} />

And don't forget to define the size (width and height) the image, if you get Image from rest API in React Native

Unable to get Image from JSON API in react-native

1 Answers1