angular - 如何将 Blob 转换为图像并将其显示 Angular 5

Question

我正在尝试显示从服务器端发送的图像，服务器发送图像然后将其转换为 blob 但我无法将其转换为图像以在 DOM 中显示

这是component.ts中的代码

getImageFromService() {
      this.authService.getProfileImage().subscribe(data => {
        this.createImageFromBlob(data);
        console.log(data);
      }, error => {
        console.log(error);
      });
} 

此代码以 blob 形式从服务器获取图像

这是我编写的将 blob 转换为图像的代码

createImageFromBlob(image: Blob) {
     let reader = new FileReader();
     reader.addEventListener("load", () => {
        this.imageToShow = reader.result;
     }, false);

     if (image) {
        reader.readAsDataURL(image);
     }
  } 

这是HTML中的代码

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

这是 chrome devtool 中的响应

Blob(763750) {size: 763750, type: "text/xml"}

Answer 1

我认为您只需执行此操作即可将 Blob 转换为文件:

const file = new File([blob], fileName);