Angular：显示来自blob的图像

Question

无法显示我的图像。知道我做错了什么吗？

 <img style="width:175px" [src]="imageToShow">


getImage(){
  this.mccProgramService.getImageFromService().subscribe(
    (res) => {
      console.log(res);
      this.imageToShow = res;
    //  window.open(fileURL);
    }
  );
}

getImageFromService() {
        return this._httpClient.get("http://localhost:9080/mccr/api/file/download.action?contentFileId=11", {observe: 'response', responseType: 'blob'})
          .map((res) => {
            return new Blob([res.body], {type: res.headers.get('Content-Type')});
          })
      }

数据从服务中返回

<<other headers>>
<<Content-Type header>>
<<other headers>>
<<file binary data>>

Answer 1

如果你有blob图像值，你可以直接在图像标签中设置值..

<img  src="data:image/png;base64,{{blobData}}"/>

我已经在 angular7 中尝试过，它的工作原理..

Answer 2

您需要为 blob 创建一个对象 URL：

this.imageToShow = URL.createObjectURL(res);

更新

另外，如果您将responseType 设置为blob，那么您将返回一个blob，因此您可以完全删除getImageFromService 中的map 语句