Привязать изображение из службы в угловых 6

Question

У меня есть конечная точка, которая предоставляет мне изображение на основе определенного параметра.Это не URL-адрес изображения, это просто изображение.Поэтому, когда я нажимаю конечную точку в почтальоне, в ответ я получаю изображение (JPG).

Я получаю это изображение в переменной и связываю его в теге HTML?

Всевопросы имеют решение для отображения URL-адреса изображения к изображению, в то время как мое - это изображение, которое я должен отобразить в пользовательском интерфейсе.

show-image-component.ts

this.appservice.getImage().subscribe((image) => {
    console.log(image);
 }
)

service.ts

getImg() {

 return this.httpClient.get('xyz.com', {headers: this.httpHeaders});

 }

Как отобразить полученное изображение в переменной изображения в HTML?

Answer 1

На Angular 6+ вы можете попробовать это

На сервисе:

import { DomSanitizer } from '@angular/platform-browser';
import { HttpClient, HttpHeaders } from '@angular/common/http';

...

constructor(private http: HttpClient, private sanitizer: DomSanitizer) {
}

getFile(url: string): any {

  return this.http.get(url, {
    responseType: 'blob'
  })
  .pipe(
    map((res: any) => {
      const urlCreator = window.URL;
      return this.sanitizer.bypassSecurityTrustUrl(urlCreator.createObjectURL(res));
    })
 );
}

На компоненте:

const imgSrc: any;

downloadFile(uri) {
  this.service.getFile(uri).subscribe((res: any) => {
  this.imgSrc = res;
});

}

По шаблону:

<img id="myImg" [src]="imgSrc" alt="Attached file" style="width: 100%">
<button type="button" (click)="downloadFile('YourFile/Url')" id="imgBtn">

Answer 2

Вы можете найти подробные инструкции о том, как этого добиться, в этом сообщении в блоге -> https://blog.mikehodnick.com/angular-download-image-blob-and-bind-to-img/

TL; DR - Если коротко, то вам нужно сделать следующее:

(обратите внимание, это было реализовано с использованием Angular 4.1.3 )

1. Получите ваше изображение с помощью http
2. Установите тип ответа BLOB чтобы получить изображение в двоичном формате
3. Очистить ответ BLOB-объекта
4. Назначить обработанный ответ переменной-члену в файле service.ts
5. Назначитьпеременная-член для атрибута src в вашем представлении в HTML
6. Прибыль: D

Пример кода из вышеуказанного поста в блоге:

просмотр

<img [src]="imageData">

компонент

import { Component, OnInit } from '@angular/core';
import { Http, ResponseContentType } from '@angular/http';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
import 'rxjs/add/operator/toPromise';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {

  imageData: any;

  constructor(private http: Http, private sanitizer: DomSanitizer) {
  }

  ngOnInit() {
    const imageUrl = 'http://where.your.images/are/hosted.jpg';

    this.http.get(imageUrl, {
      responseType: ResponseContentType.Blob
    })
      .toPromise()
      .then((res: any) => {
        let blob = new Blob([res._body], {
          type: res.headers.get("Content-Type")
        });

        let urlCreator = window.URL;
        this.imageData = this.sanitizer.bypassSecurityTrustUrl(
            urlCreator.createObjectURL(blob));
      });
  }

}