在Angular 5中显示从后端发送的图像

我正在开发一个MEAN Stack应用程序，我想做的是在

HTML5

中的图像标签中显示用户的个人资料图像，因此图像保存在

MongoDB

中，后端是

节点

这是节点代码：

router.get('/getProfileImageok',(req,res)=>{
    gfs.files.findOne({ metadata: req.de },(err,file)=>{
      if(!file || file.length === 0){
        res.json({success:false,message:'no file exits'});
        console.log(req);
      }
      if(file.contentType === 'image/jpg' ||file.contentType === 'image/jpeg' || file.contentType === 'image/png'){
        const readStream = gfs.createReadStream(file.filename);
        readStream.pipe(res);
        console.log(req.decoded.userId);
      }else{
        res.json({success:false,message:'no image type'});
      }
    });
  });

这是

**service.ts**

getProfileImage(){
this.createAuthenticationHeaders(); // Create headers before sending to API
 this._http.get.(this.domain + '/authentication/getProfileImageok',this.options);
}

这是Angular 5中的代码

    image;
imageToShow="https://static1.squarespace.com/static/503935e6e4b011773393f0f9/t/52934b61e4b023ca75614a20/1385384808083/Facebook+User.gif";
        getImageFromService() {
              this.authService.getProfileImage().subscribe(data => {
                 this.image = data.arrayBuffer();
              }, error => {
                this.isImageLoading = false;
                console.log(error);
              });
        }

HTML中的代码

  <img [src]="imageToShow || image" alt="" class="img">

`

更改代码后，我使用了chrome devtool

试试这样的事情：

const reader = new FileReader();
      reader.onload = (e: any) => {
        this.imageToShow = this.sanitizer.bypassSecurityTrustResourceUrl(e.target.result);
      };
      reader.readAsDataURL(imgReturnedFromBackend);

---

此.image的

值是多少。你能在问题中加上这个吗？你的实际问题是什么？是否有任何东西不能按预期工作？后端工作得很好，但问题在于它自身的角度。
imageToShow
？这是结果`警告：清理不安全的URL值响应，状态：200 OK for URL:（请参阅）`错误类型错误：未能对“FileReader”执行“readAsDataURL”：参数1的类型不是“Blob”
getProfileImage（）{this.authService.createAuthenticationHeaders（）；this.http.get（this.authService.domain+/authentication/getProfileImageok'，this.authService.options）。订阅（数据=>{const reader=new FileReader（））；reader.onload=（e:any）=>{this.imageToShow=this.sanitizer.bypassSecurityTrustResourceUrl（e.target.result）；}；reader.readAsDataURL（this.imageToShow）；}，err=>console.log（'Error is..:'+err））；}
我认为问题在于它需要首先转换为blob而不是readAsDataURL尝试使用readAsArrayBuffer，如果仍然不起作用，不知道是同一个错误，那么您能为我写一个完整的代码来演示所有步骤吗