Angular 8/9 - 通过服务获取图像并将其显示在屏幕上，无需 url

Question

我有一个返回类型文档的 api 调用：content-type
image/png

图像被发回，但没有 url，它只是发回整个图像对象。如果直接在浏览器上调用 api，它只会直接显示图像。

我希望能够有一个服务来获取此图像并将其显示在组件中。

图像数据.ts

import { Observable } from 'rxjs';

export interface ImageInfo {
    image: Image
}

export abstract class ImageData {
  abstract getImageData(): Observable<ImageInfo>;
}

图像数据服务.ts

import { Injectable } from '@angular/core';
import { of as observableOf, Observable } from 'rxjs';
import { ImageInfo, ImageData } from '../data/image-data';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { throwError } from 'rxjs';
import { retry, catchError } from 'rxjs/operators';

@Injectable()
export class ImageDataService extends ImageData {


    baseurl = 'https://website.com/image';
    httpOptions = {
        headers: new HttpHeaders({
          'Content-Type': 'image/png'
        })
      }

    constructor(private http: HttpClient) {
        super();
    }

  private imageInfoData: ImageInfo = 
    {
        image: Image
    }


    getImageData(): Observable<ImageInfo> {
        return this.http.get<ImageInfo>(this.baseurl)
        .pipe(
          retry(1),
          catchError(this.errorHandl)
        )
  }

   // Error handling
   errorHandl(error) {
    let errorMessage = '';
    if(error.error instanceof ErrorEvent) {
      // Get client-side error
      errorMessage = error.error.message;
    } else {
      // Get server-side error
      errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
    }
    console.log(errorMessage);
    return throwError(errorMessage);
 }
}

在组件中显示我正在尝试的图像：

   this.imageDataService.getImageData()
      .pipe(takeWhile(() => this.alive))
      .subscribe((ImageData) => {
        this.imageData = imageData;

      });

然后在组件 html 中我想显示图像：

<img [src]="imageData"> 
// Not sure if I should set the src because I get back the entire image not the url

Answer 1

在标头选项中将响应类型设置为 BLOB

   {responseType: 'blob'}

这样我们就得到了二进制格式的图像

然后

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

然后在构造函数中放入

private sanitizer: DomSanitizer

然后在您成功的服务电话中

this.imageData = this.sanitizer.bypassSecurityTrustUrl(
            urlCreator.createObjectURL(blob));