如何使用 Angular2 和 NPM 通过 Bearer Authorization 异步加载图像

Question

我正在寻找使用 Angular2 的最新解决方案。我有一个图像列表，所以在我的模板中，我这样做：

<div *ngFor="let myImg of myImages">
    <img src="{{myImg}}" />
</div>

myImages 是一个数组加载到我的 component.ts:

myImages: string[] = new Array();

这是 Postman 和 API 调用，我试图模仿它：

在 angular2 中执行此操作的最佳方法是什么？

Answer 1

我怀疑是否有办法做到这一点，因为浏览器通常不允许您在 img 元素上设置身份验证 header。

您最好的替代方法是使用 http 服务通过单独的 http 请求检索图像，然后稍后使用该值设置源。

响应最好是经过 base64 编码的图像，这样您就可以将其设置为 img 标签的来源，但有一些方法可以在客户端将二进制文件转换为 base64。

How to load images async with Bearer Authorization using Angular2 & NPM