Ionic v2下载和显示图像

npm install @angular/common @angular/http

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    MyApp,
    // 其他组件...
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpClientModule, // 添加这一行
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    // 其他组件...
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: ErrorHandler, useClass: IonicErrorHandler }
  ]
})
export class AppModule { }

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  imageUrl: SafeResourceUrl;

  constructor(private http: HttpClient, private sanitizer: DomSanitizer) {}

  ionViewDidEnter() {
    this.downloadImage('https://example.com/image.jpg');
  }

  downloadImage(url: string) {
    this.http.get(url, { responseType: 'blob' }).subscribe((data: Blob) => {
      const objectURL = URL.createObjectURL(data);
      this.imageUrl = this.sanitizer.bypassSecurityTrustResourceUrl(objectURL);
    });
  }
}

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <img [src]="imageUrl" alt="Downloaded Image">
</ion-content>