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

У меня есть новая разработка Angular 4. У меня возникла проблема при получении ответа от API о отображаемом изображении. В API файл изображений имеет файл входного потока, я не знаю, как его получить и правильно отобразить.

Можете ли вы его решить?

Я попробовал это:

  • Image.Component.ts:

    this.http.get('http://localhost:8080/xxx/download/file/596fba76ed18aa54e4f80769')
             .subscribe((response) => { var blob = new Blob([response.text()], {type: "image/png"});
               console.log(blob);
               console.log(window.btoa(blob.toString()));           
    });
    

Результат этого => W29iamVjdCBCbG9iXQ==, но это был W29iamVjdCBCbG9iXQ== формат

и попробовал это также:

this.http.get('http://localhost:8080/xxx/download/file/596fba76ed18aa54e4f80769').map(Image=>Image.text())
  .subscribe(data => {
    console.log((data.toString()));   
});

Результат вроде этого =>

 ����\ExifII*��7                                                      ��DuckyK��fhttp://ns.adobe.com/xap/1.0/<?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?> <x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.3-c011 66.145661, 2012/02/06-14:56:27        "> <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <rdf:Description rdf:about="" xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/" xmlns:stRef="http://ns.adobe.com/xap/1.0/sType/ResourceRef#" xmlns:xmp="http://ns.adobe.com/xap/1.0/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmpMM:OriginalDocumentID="xmp.did:0280117407206811A2188F30B3BD015B" xmpMM:DocumentID="xmp.did:E2C71E85399511E7A5719C5BBD3DDB73" xmpMM:InstanceID="xmp.iid:E2C71E84399511E7A5719C5BBD3DDB73" xmp:CreatorTool="Adobe Photoshop CC 2014 (Windows)"> <xmpMM:DerivedFrom stRef:instanceID="xmp.iid:7092a9cd-b3fd-bb49-b53c-9b6e1aa1ac93" stRef:documentID="adobe:docid:photoshop:40615934-3680-11e7-911d-f07c687d49b8"/> <dc:rights> <rdf:Alt> <rdf:li xml:lang="x-default">                                                      </rdf:li> </rdf:Alt> </dc:rights> <dc:creator> <rdf:Seq/> </dc:creator> </rdf:Description> </rdf:RDF> </x:xmpmeta> <?xpacket end="r"?>���Photoshop 3.08BIMJZ%Gt6                                                      8BIM%�<".}��νz��܌��Adobed����  

но я использовал для кодирования, используя window.btoa, это должна быть ошибка, а не латинский диапазон

Ответ 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"});
}