Angular 2 Web API calling Get -

i calling api angular 2 sends data in format bellow.i need show picture(large) result how can this.

image request response

here admin.component.ts class code

component

import {component} '@angular/core'; import { routeconfig, router_directives, router_providers,routedefinition, router} '@angular/router-deprecated'; import {logincomponent} '../components/login.component'; import {observable} 'rxjs/rx';  import {http, headers} '@angular/http'; @component({     templateurl:'../../app/layouts/admin.html',     selector:'admin',     directives: [router_directives] })   export class admincomponent { randomquote: string; private _data: observable<any[]>;      constructor(public http: http) { this.getrandomquote();   }   getrandomquote() {   this.http.get('https://randomuser.me/api/')     .subscribe(       data => this._data = data.json(),       err => this.logerror(err),       () => console.log('user api call')     ); }    logerror(err) {     console.error('there error: ' + err);   } } 

here admin.html code

html

<admin>  <div class="row">      <div class="col-md-2" style="padding-top:2em; background-color:#dcdcdc;">          <div class="text-center">              <img src="data?.results[0].picture.large" class="img-circle" alt="pic" /><br />              <a href="#">logout</a>          </div>          <ul class="nav nav-sidebar">              <li> <a [routerlink]="['hello']">users</a></li>              <li><a >groups</a></li>              <li><a >products</a></li>              <li><a >apis</a></li>          </ul>      </div>        <div class="col-md-10">          <div class="page-header ">              <h1>                  admin portal              </h1>          </div>            <div class="content padding has-header">              <router-outlet>                </router-outlet>          </div>      </div>  </div>  </admin>

this.http.get(...).subscribe(data => this.data = data.json()); 

<img [src]="data?.results[0].picture.large">