在Angular 4/5+中从API获取图像？
我有一个新的开发角度4。我有面临的问题，从接口得到响应关于显示image.In接口，一个图像文件有输入流文件，我不知道如何检索和正确显示它。
你能解决这个问题吗？
我试过这个：
- Image.Component.ts:
this.http.get('http://localhost:8080/xxx/download/file/596fba76ed18aa54e4f80769') .subscribe((response) => { var blob =新建Blob(response.text()，{type：“图像/png”}))；console.log(blob)；console.log(window.btoa(blob.toString()；});
此=> 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编码，它应该是错误的，而不是拉丁范围
回答 2
Stack Overflow用户
发布于 2017-08-11 16:37:26
您应该在GET-Request设置中设置responseType: ResponseContentType.Blob，因为这样您就可以获得blob格式的图像，并在以后将其转换为da base64编码源。你上面的代码不好。如果您希望正确执行此操作，请创建单独的服务以从API获取图像。因为在组件中调用HTTP-Request是不好的。
下面是一个有效的示例：
创建image.service.ts并放入以下代码：
Angular 4:
getImage(imageUrl: string): Observable<File> {
return this.http
.get(imageUrl, { responseType: ResponseContentType.Blob })
.map((res: Response) => res.blob());
}Angular 5+:
getImage(imageUrl: string): Observable<Blob> {
return this.httpClient.get(imageUrl, { responseType: 'blob' });
}重要提示:由于Angular 5+，您应该使用新的
默认情况下，新的HttpClient返回JSON。如果您需要其他响应类型，则可以通过设置responseType: 'blob'来指定。请阅读有关该here的更多信息。
现在您需要在image.component.ts中创建一些函数来获取图像并将其显示在html中。
要从Blob创建图像，需要使用JavaScript的FileReader。下面是创建新FileReader并侦听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 in 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+ here的工作示例。
Stack Overflow用户
发布于 2018-05-05 15:28:21
角度5：
getImage(id: string): Observable<Blob> {
return this.httpClient.get('http://myip/image/'+id, {responseType: "blob"});
}https://stackoverflow.com/questions/45530752
复制相似问题
腾讯云开发者
