从 Angular 4/5 中的 API 获取图像？

Question

我是使用 Angular 4 进行开发的新手。我在从 API 获得有关显示图像的响应时遇到问题。在 API 中，图像文件具有输入流文件。我不知道如何检索它并正确显示它。

有谁能解决吗？

我试过这个：

• Image.Component.ts：

    this.http.get('http://localhost:8080/xxx/download/file/596fba76ed18aa54e4f80769')
            .subscribe((response) => { var blob = new Blob([response.text()], {type: "image/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 进行编码，它应该是错误，比如不是拉丁语范围。

原文由 Karthic G 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

不需要使用angular http，可以用js原生函数搞定

 // you will ned this function to fetch the image blob.
async function getImage(url, fileName) {
     // on the first then you will return blob from response
    return await fetch(url).then(r => r.blob())
    .then((blob) => { // on the second, you just create a file from that blob, getting the type and name that intend to inform

        return new File([blob], fileName+'.'+   blob.type.split('/')[1]) ;
    });
}

// example url
var url = 'https://img.freepik.com/vetores-gratis/icone-realista-quebrado-vidro-fosco_1284-12125.jpg';

// calling the function
getImage(url, 'your-name-image').then(function(file) {

    // with file reader you will transform the file in a data url file;
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onloadend = () => {

    // just putting the data url to img element
        document.querySelector('#image').src = reader.result ;
    }
})

 <img src="" id="image"/>

原文由 Vitor Kevin 发布，翻译遵循 CC BY-SA 4.0 许可协议