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创建一个对象URL：

this.imageToShow = URL.createObjectURL(res);

更新

此外，如果您将responseType设置为blob，那么您将返回一个blob，以便您可以完全删除getImageFromService

中的map语句

Answer 2

如果您有Blob图片值，则可以直接在图片标签中设置该值。

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

我已经在angular7中尝试过了，可以正常工作。

角度：从blob显示图像

2 个答案: