Angular 8/9 - 通过服务获取图像并在没有 url 的情况下显示在屏幕上

Question

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

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

我希望能够获得此图像并在组件中显示它的服务。

图片-data.ts

import { Observable } from 'rxjs';

export interface ImageInfo {
    image: Image
}

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

图像数据-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

在将其应用为 src 之前，您需要创建一个前端可以使用的图像。

假设您从服务中返回了一个 blob，您可以执行与此类似的操作：

imageToShow: any;

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

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

然后在您的 src 中使用生成的图像：

<img [src]="imageToShow">

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

在header选项中设置响应类型为BLOB

   {responseType: 'blob'}

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

然后

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

然后在构造函数中输入

private sanitizer: DomSanitizer

然后在您的成功呼叫服务中

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

Angular 8/9 - 通过服务获取图像并在没有 url 的情况下显示在屏幕上

Angular 8/9 - Getting image via service and showing it on screen without a url

angular

angular8

angular9