Получение изображения из API в Angular 4/5+?

Ответ 1

Вы должны установить responseType: ResponseContentType.Blob в своих настройках GET-Request, потому что вы можете получить свое изображение как blob и преобразовать его позже в исходный код base64. Вы неправильно указываете код. Если вы хотите сделать это правильно, создайте отдельный сервис для получения изображений из API. Beacuse нехорошо вызывать HTTP-запрос в компонентах.

Вот рабочий пример:

Создайте image.service.ts и image.service.ts следующий код:

Угловой 4:

getImage(imageUrl: string): Observable<File> {
    return this.http
        .get(imageUrl, { responseType: ResponseContentType.Blob })
        .map((res: Response) => res.blob());
}

Угловой 5+:

getImage(imageUrl: string): Observable<Blob> {
  return this.httpClient.get(imageUrl, { responseType: 'blob' });
}

Важно: с помощью Angular 5+ вы должны использовать новый HttpClient.

Новый HttpClient возвращает JSON по умолчанию. Если вам нужен другой тип ответа, вы можете указать это, установив responseType: 'blob'. Подробнее об этом читайте здесь.

Теперь вам нужно создать некоторую функцию в вашем image.component.ts чтобы получить изображение и показать его в html.

Для создания образа из Blob вам необходимо использовать JavaScript FileReader. Вот функция, которая создает новый FileReader и прослушивает Load-Event FileReader. В результате эта функция возвращает base64-кодированное изображение, которое вы можете использовать в img src-attribute:

imageToShow: any;

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

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

Теперь вы должны использовать созданный ImageService для получения изображения из api. Вам необходимо подписаться на данные и предоставить эти данные createImageFromBlob -function. Вот пример функции:

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

Теперь вы можете использовать свой imageToShow -variable в HTML-шаблоне следующим образом:

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

Надеюсь, это описание понятно, и вы можете использовать его в своем проекте.

См. Рабочий пример для Angular 5+ здесь.

Ответ 2

угловой 5:

 getImage(id: string): Observable<Blob> {
    return this.httpClient.get('http://myip/image/'+id, {responseType: "blob"});
}