angular2 http get image 顯示到頁面

咱們的server端會返回一個image/* (image/jpeg, image/png等等) 的圖片對象，我預先定義了在http請求的入參中返回值的類型爲blob

export interface RequestOptionsArgs {
    url?: string;
    method?: string | RequestMethod;
    search?: string | URLSearchParams;
    headers?: Headers;
    body?: any;
    withCredentials?: boolean;
    responseType?: ResponseContentType;
}

export declare enum ResponseContentType {
    Text = 0,
    Json = 1,
    ArrayBuffer = 2,
    Blob = 3,
}

上圖是angular的源代碼，因此個人代碼是根據blob來操做的

在typescript中須要將該對象解析，而後顯示到頁面上

頁面部分：

<img [src]="imageData | safeUrl">

其中safeUrl是個過濾器，代碼以下：

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
  name: 'safeUrl'
})
export class SafeUrlPipe implements PipeTransform {
  constructor(private domSanitizer: DomSanitizer) {}
  transform(url) {
    return this.domSanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

爲何要加這個過濾器呢？下面會講到

typescript部分：

getThumbnailImage(){
  this.service.getThumbnailImage(this.id,(resp)=>{
    let urlCreator = window.URL;
    this.imageData = urlCreator.createObjectURL(resp._body);
    console.log(this.imageData);
  });
}

這個函數的做用是經過id去獲取server端的圖片，resp是返回值，返回值中的_body就是圖片對象，經過使用rulCreator的方法，能夠獲得一個blob:https的圖片對象路徑，可是這個blob路徑在瀏覽器中會顯示爲unsafe，好比獲取到的url爲：blob:https://127.0.0.1/031c6651-7236-477f-99ae-44f775f9f17e，那麼加在img標籤src中的值爲變爲：unsafe:blob:https://127.0.0.1/031c6651-7236-477f-99ae-44f775f9f17e，這是angular的語法形成的，會自動爲https等不安全連接加上前綴，這時候就須要使用angular的browser來去掉這個前綴，將去掉前綴的方法寫成一個pipe這樣簡潔明瞭，使用方便