Node.Js/Express + Angular2圖像發送和顯示圖像

Question

我試圖在Angular2中顯示來自Nodejs響應的圖像。

節點：

router.get('/users/avatar', function(req, res){ 
    res.sendFile(req.user.avatarName, { 
     root: path.join(__dirname+'/../uploads/') 
    }, function (err) { 
     if (err) { 
      console.log(err); 
     } 
    }); 
}); 

和Angular2

//userService.ts 
    getAvatar(): Observable<any>{ 
    return this.http 
     .get(this.protectedUrl +'/avatar', {headers: this.protectedHeaders}) 
     .map(res => { 
      return new Blob([res["_body"]], { 
      type: 'image/png' 
      }) 
     }).map(blob => { 
      let urlCreator = window.URL; 
      return this.sanitizer.bypassSecurityTrustUrl(urlCreator.createObjectURL(blob)); 
      }) 

    } 

app.component.ts

ngOnInit() { 
     this.userService.getAvatar().subscribe(response =>{ 
      console.log(response); 
      this.avatarSrc=response; 
     }); 
    } 

app.component.htm

<div> 
    <img [src]="avatarSrc"> 
<div> 

這不顯示任何內容，但是我檢查blob url，它顯示「The image」blob：http://localhost:4200/2a723d0c-da55-4bd5-84fd-4895c803c7a5「無法顯示，因爲它包含錯誤。」 那麼我在做什麼錯？

Answer 1

使用Response#blob()方法來檢索BLOB：

和Angular2

//userService.ts 
    getAvatar(): Observable<any>{ 
    return this.http 
     .get(this.protectedUrl +'/avatar', { 
      headers: this.protectedHeaders, 
      responseType: ResponseContentType.Blob 
     }) 
     .map(res => res.blob()) 
     .map(blob => { 
      let urlCreator = window.URL; 
      return this.sanitizer.bypassSecurityTrustUrl(urlCreator.createObjectURL(blob)); 
      }) 

    } 

節點：

在響應本身添加的內容類型：

router.get('/users/avatar', function(req, res){ 
    res.sendFile(req.user.avatarName, { 
     root: path.join(__dirname+'/../uploads/'), 
     headers: {'Content-Type': 'image/png'} 
    }, function (err) { 
     if (err) { 
      console.log(err); 
     } 
    }); 
});