Angular 8/9 - Получение изображения через сервис и отображение его на экране без URL

Question

У меня есть вызов API, который возвращает документ типа: content-type
image / png

Изображение отправляется обратно, но URL-адрес отсутствует, оно просто отправляет обратно весь объект изображения. Если API вызывается непосредственно в браузере, он просто показывает изображение напрямую.

Я хочу иметь возможность иметь службу, которая получает это изображение и отображает его в компоненте.

image-data.ts

import { Observable } from 'rxjs';

export interface ImageInfo {
    image: Image
}

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

image-data-service.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));

Answer 2

Пожалуйста, попробуйте вот так

в html

<img [src]="imageToShow"
     alt="Place image title"
     *ngIf="!isImageLoading; else noImageFound">
<ng-template #noImageFound>
     <img src="fallbackImage.png" alt="Fallbackimage">
</ng-template>

в обслуживании

getImageData(): Observable<ImageInfo> {
return this.httpClient.get(imageUrl, { responseType: 'blob' })
.pipe(
  retry(1),
  catchError(this.errorHandl)
)}

в компоненте

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

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



    getImageFromService() {
      this.isImageLoading = true;
      this.imageService.getImage(this.imgUrl).subscribe(data => {
        this.createImageFromBlob(data);
        this.isImageLoading = false;
      }, error => {
        this.isImageLoading = false;
        console.log(error);
      });
  }


    ngOnInit(){
     this.getImageFromService()
   }

Answer 3

Вам нужно создать изображение, которое веб-интерфейс может использовать, прежде чем применять его как sr c.

Если вы получите блоб, возвращенный из вашего сервиса, вы можете сделать что-то похожее на это:

imageToShow: any;

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

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

А затем используйте сгенерированное изображение в вашем sr c:

<img [src]="imageToShow">