Angular 5-如何以HTML形式显示来自HTTP POST输出的图像? [英] Angular 5 - How to display image in HTML that comes as output from a http POST?
问题描述
我需要显示来自POST请求的缩略图/图像
I need to display an thumbnail/image that comes from a POST request
邮递员以正确的方式显示输出
我试图在Angular组件中使用相同的控件,但不显示.控制台显示文本/二进制文件.
I'm trying to use the same in Angular component but does not display. Console show text/binary.
html
<img src="{{turl}}" />
Component.ts
turl : any
getThumbnail() : void {
this.azureblobService.getBlobThumbnail()
.subscribe(
(val) => {
console.log("POST call - getThumbnail- successful value returned in body",
val);
this.turl = val; //<====== Set value here
},
response => {
console.log("POST call - getThumbnail - in error", response);
},
() => {
console.log("The POST - getThumbnail - observable is now completed.");
});
}
服务
getBlobThumbnail() {
console.log("....AzureblobService.getBlobThumbnail()");
const headers = new HttpHeaders({
'Content-Type': 'application/json',
'Accept' : 'application/json',
'Ocp-Apim-Subscription-Key' : 'xxxxxxx'
});
return this.http.post(this.thumbnailFetchUrl,
JSON.stringify({
responseType: "blob",
"url": "http://xxxx.blob.core.windows.net/acsazurecontainer/Git-Logo-1788C.png",
}), {headers: headers});
}
需要任何帮助吗?
推荐答案
在 Suresh Kumar Ariya的帮助下经过反复的反复,找到了解决方法.
With Suresh Kumar Ariya's help and after a lot of back/forth, found the solution.
此处讨论了解决方案: https://github.com/angular/angular/issues/18586
Solution was discussed here: https://github.com/angular/angular/issues/18586
此处的关键是使用responseType: 'blob' as 'json'
而不是responseType: 'blob'
The key here is to use responseType: 'blob' as 'json'
and not responseType: 'blob'
Service.ts
getBlobThumbnail(): Observable<Blob> {
console.log("....AzureblobService.getBlobThumbnail()");
const headers = new HttpHeaders({
'Content-Type': 'application/json',
'Accept': 'application/json',
});
return this.httpClient.post<Blob>(this.thumbnailFetchUrl,
{
"url": "http://xxxx/Logo-1788C.png"
}, {headers: headers, responseType: 'blob' as 'json' });
}
Component.ts
getThumbnail() : void {
this.azureblobService.getBlobThumbnail()
.subscribe(
(val) => {
console.log("POST - getThumbnail- successful value returned in body", val);
this.createImageFromBlob(val);
},
response => {
console.log("POST - getThumbnail - in error", response);
},
() => {
console.log("POST - getThumbnail - observable is now completed.");
});
}
/* Convert */
createImageFromBlob(image: Blob) {
console.log("Call createImageFromBlob()", image);
let reader = new FileReader();
reader.addEventListener("load", () => {
this.imageBlobUrl = reader.result;
}, false);
if (image) {
reader.readAsDataURL(image);
}
}
Component.html
<h2>Thumbnail imageBlobUrl</h2>
<img [src]="imageBlobUrl">
环境:Angular 5.0.0
Environment: Angular 5.0.0
这篇关于Angular 5-如何以HTML形式显示来自HTTP POST输出的图像?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!