Node.Js/Express + Angular2画像が画像を送信して表示する

Question

Nodejsの応答からAngular2で画像を表示しようとしています。

ノード：

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> 

これは何も表示されませんが、私はブロブのURLをチェックして、 "画像"ブロブ：http://localhost:4200/2a723d0c-da55-4bd5-84fd-4895c803c7a5 "にはエラーが含まれているため表示できません。 だから私は間違って何をしているのですか？

Answer 1

ブロブを取得するためにResponse#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); 
     } 
    }); 
});