Невозможно получить изображение из JSON API в реагирующем

Question

Я новичок в реагировать на родной, и я пытаюсь получить URL-адрес изображения из JSON API. Когда я запускаю свой код, я получаю сообщение об ошибке "источник не определен". Так что я просто хочу знать, как я могу получить URL моего изображения из JSON API. Я могу получить ответ URL, проверьте мой код.

    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>

Я получаю этот ответ console.log. Здесь я могу получить «firstName», но не могу получить «фотографию» из этого ответа. Пожалуйста, проверьте.

 {
 "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
}

Answer 1

Вы должны использовать uri: , если получите от inte rnet или с сервера.

пример:

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

И не забудьте указать размер (ширина и высота) изображения, если вы получаете Image из остальных API в React Native