角度:显示Blob中的图像 [英] Angular: Display image from blob

问题描述

无法显示我的图像.知道我做错了吗?

having trouble getting my image to show.. Any idea what i am doing wrong?

 <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>>

推荐答案

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

If you have blob image value, you can directly set the value in image tag..

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

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

I have tried it in angular7, its working..

这篇关于角度:显示Blob中的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！