时间戳

首页 > 解决方案 > 显示已在 Angular 5 中作为 Blob 对象接收的图像

angular - 显示已在 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);，if告诉我的是这个

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

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

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

那怎么了

标签： angular

解决方案

首先尝试将 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

推荐阅读