Как визуализировать изображение в angular с сервера в Angular?
у меня есть бэкэнд весенней загрузки... сделал сервис, который возвращает изображение массива байтов.. как получить его в Angular и отобразить...
вот мой угловой код:
getFile(id) {
const _loadFileByIdUrl = environment.baseUrl + `finance/api/getFile`;
const fd = new FormData();
fd.append('id', id);
return this.http.post<any>(_loadFileByIdUrl, fd
);
}
я пытаюсь выполнить console.info(), ответ равен 200, но я получил сообщение об ошибке: сообщение: «Ошибка HTTP во время синтаксического анализа для http://localhost:8080/finance/api/getFile»
Является ли base64 лучшим форматом для загрузки изображения с сервера?
Ответы 1
Если вы не укажете, что ожидается другой тип ответа, http-клиент попытается проанализировать ответ как JSON. Используйте responseType blob для двоичных данных:
this.http.post(_loadFileByIdUrl, fd, { responseType: 'blob' });
Учитывая, что в вашем шаблоне есть тег изображения, например:
<img #smartesImage />
Затем вы можете получить доступ к изображению в своем шаблоне так
@ViewChild('smartesImage') smartesImage: ElementRef<any>;
И на самом деле отображать двоичные данные, используя следующий код:
this.http.post(_loadFileByIdUrl, fd, { responseType: 'blob'}).subscribe(res => {
const objectURL = URL.createObjectURL(res);
this.smartesImage.nativeElement.src = objectURL;
});
при размещении этой строки: this.http.post<any>(_loadFileByIdUrl, fd, { responseType: 'blob' }); я получаю эту ошибку: тип «blob» не может быть назначен типу «json»
Возможный дубликат BASE64 для изображения angular 2