显示在 Angular 5 中作为 Blob 对象接收的图像

我正在开发一个 MEAN Stack 应用程序，我想做的是显示存储在数据库中的图像，这样后端就可以工作，但我真正的问题是在前端Angular所以我这样做了

首先从后端接收图像，我做了一个服务来做到这一点

// Function to get user's profile image
  getProfileImage(){
      let httpHeaders = new HttpHeaders()
                         .set('authorization', this.authToken);
    return this._http.get(this.domain + '/authentication/getProfileImage',{headers :httpHeaders,
      responseType: "blob"});

  }

接收 Blob 形式的图像。

第二个是在component.ts我尝试将 Blob 转换为文件

imageToShow: any;

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

这是从服务获取图像并使用console.log(data);

这就是我得到的

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

它的大小与数据库中的文件长度相同，因此它可以工作。

现在将 Blob 转换为图像的第二种方法

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

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

与console.log(this.imageToShow);它显示的是这个data:text/xml;base64,/9j/4RE6RXhpZgAATU0A一个很长的string那是一个base64，所以我添加一个console.log(image); in the if向我展示的是这个

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

所以它没有做任何事情并且在 HTML 中

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

那么出了什么问题

首先尝试将 img 标签绑定到一个变量，该变量将成为图片的 url。 例如

<img [src]=imageUrl>

那么你需要使用DomSanitizer

import { DomSanitizer } from '@angular/platform-browser';

constructor(private sanitizer:DomSanitizer)

绕过您的 unsafeUrl 的 SecurityTrust 在你的组件中，当你检索图像时，你应该为图像创建一个 url，如下所示

getImageFromService() {
    this.authService.getProfileImage().subscribe(data => {
        unsafeImageUrl = URL.createObjectURL(data);
        imageUrl = this.sanitizer.bypassSecurityTrustUrl(unsafeImageUrl);
    }, error => {
        console.log(error);
    });
}

这将创建一个图像的临时 URL，您可以在绑定中使用它