Возврат изображения и отображение в пользовательском интерфейсе с использованием ядра Web API и Angular 7 - PullRequest
Новая
       19

Возврат изображения и отображение в пользовательском интерфейсе с использованием ядра Web API и Angular 7

1 голос
/ 24 марта 2019

Я пытаюсь отобразить изображение в пользовательском интерфейсе.

Вот мой основной код ASP.NET Web API для этого. 

    [Route("{id:int}/image")]
    public async Task<IActionResult> GetImage(int id)
    {
        var data = await this.designService.GetImageAsync(id);

        byte[] result = data.Data;

        return this.File(result, "image/jpeg");
    }

Я следовал этому Ссылка Я предполагаю, что приведенный выше код является правильным (Не уверен, если естьлучший способ вернуть изображение - пожалуйста, помогите мне)

В компоненте мой код выглядит следующим образом. 

this.service.getImageThumbnail(id).subscribe(
  baseImage => {
    this.thumbnail = baseImage;
  },
  error => (this.errorMessage = error)
);

В Service реализация выглядит так 

getDesignThumbnail(id: number) {
return this.http
.get(`https://localhost:44314/api/designs/${id}/thumbnail`)
.pipe(catchError(error => this.errorHandler(error)));

}

В HTML я отображаю вот так. (Не уверен, что это правильно) 

 <img width="100" height="100" data-bind="attr: { src: thumbnail }" />

Я получаю это сообщение об ошибке Error

1 Ответ

1 голос
/ 24 марта 2019

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

Я использовал этот способ для отображения изображения из API. 

[Route("{id:int}/image")]
    public async Task<dynamic> GetImage(int id)
    {
        var data = await this.designService.GetImageAsync(id);

        byte[] result = data.Data;

        return new { Image = result}
    }

В службу добавьте private sanitizer: DomSanitizer в конструктор. 

this.service.getImageThumbnail(id).subscribe(
  baseImage => {
    let objectURL = 'data:image/png;base64,' + baseImage.Image;

    this.thumbnail = this.sanitizer.bypassSecurityTrustUrl(objectURL);
  },
  error => (this.errorMessage = error)
);

Обновлено: я создаю демонстрационное чтениеjpeg-изображение из формата base64, хранящегося в json-файле.

Пожалуйста, проверьте ваше изображение в формате png или jpeg в data:image/png или data:image/jpeg https://stackblitz.com/edit/display-image-from-api

...