使用api url反应原生显示图像

Question

我想在我的反应本机程序中显示图像，该程序取自nasa api。我创建了一个反应原生项目：

     import React, { Component } from 'react';
 import {
    AppRegistry,
    StyleSheet,
     Text,
     View,
    StatusBar,
    Image
 } from 'react-native';
  import api from './utilities/api';

   export default class test extends Component {
    constructor(props){
     super(props);
 this.state ={
  apod: [],
  apodName: ''
     }
   }

 componentWillMount(){
      api.getApod().then((res)=> {
       this.setState({
       apod: res.apod,
       apodName: res.url
          })
        });
     }
   render() {
    console.log("Apod:", this.state.hdurl);
         return (
         <View>
      <StatusBar
        backgroundColor="#00FA9A"
       barStyle="dark-content"
        />
       <Text style={styles.welcome}>
      Apod: {this.state.apodName}
      </Text>
        <Image source={{uri: api.hdurl}}
        />
        </View>
        );
        }
         }

         const styles = StyleSheet.create({
        container: {
          flex: 1,
         justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: '#F5FCFF',
         },
       welcome: {
       fontSize: 20,
       textAlign: 'center',
        margin: 10,
       },
     instructions: {
      textAlign: 'center',
       color: '#333333',
      marginBottom: 5,
     },
    thumbnail: {
      width: 53,
       height: 81,
      }
   });

我也有api.js文件：

       var api ={
      getApod(){
      var url = 'https://api.nasa.gov/planetary/apod?api_key=MY KEY';
       return fetch(url).then((res) => res.json());
      }
       };

     module.exports = api;

结果我在屏幕上，它只是写了一个图像链接。但如何显示实际图像