Question

我正在研究一个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，所以我在{{1}中添加console.log(image);什么告诉我这是

if

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

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

所以出了什么问题

Answer 1

首先尝试将img标记绑定到将成为图片网址的变量。例如

<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);
    });
}

这将创建图片的临时网址，您可以在绑定中使用

Answer 2

这是我在Angular 9中所做的操作，从Rest中下载文件并显示。

image: SafeUrl | null = null;

constructor(private sanitizer: DomSanitizer, private api: ApiService) {}

download() {
    const mediaType = 'application/image';
    this.api.download(this.application.cover_photo_id).subscribe(value => {
      const blob = new Blob([value], { type: mediaType });
      const unsafeImg = URL.createObjectURL(blob);
      this.image = this.sanitizer.bypassSecurityTrustUrl(unsafeImg);
    }, error1 => {

    });
}

Api服务

download(fileId: string) {
    return this.http.get(Constants.downloadFile + `${fileId}`, {
      responseType: 'blob'
    });
}

显示

<img [src]="image" class="img-fluid rounded" alt="Responsive image">

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

2 个答案: