Angular : 显示来自 REST 服务的图像

Question

经过研究和测试，我仍然无法在我的 Angular 应用程序上显示来自 ReST API 的图像。我的 ReST Web 服务上有可用图像，为什么要使用 ReST 服务？因为为了访问您需要进行身份验证（我使用 oAuth 2 协议）。当我使用 POSTMan（ReST 客户端非常有用）时，一切正常，图像显示时什么都不做。但是当我尝试在 $http 之后用 Angular 显示它时它不起作用。

这是从服务收到的headers：

Content-Length → 51756
Content-Type → image/jpeg; charset=binary
Server → Apache/2.4.9 (Win64) PHP/5.5.12
X-Powered-By → PHP/5.5.12

这是我的 Angular 代码：

var data64 = $base64.encode(unescape(encodeURIComponent(data)));
scope.src = 'data:image/jpeg;charset=binary;base64,' + data64;

和我的 HTML :

<img ng-src="{{src}}" border="0" />

有关信息，我使用 angular-base64 (https://github.com/ninjatronic/angular-base64) 作为编码。没有 "unescape" 和 "encodeURIComponent" 我有一个错误，我试图删除空格但它仍然不起作用。

谢谢:)

Answer 1

这似乎行不通，因为您告诉浏览器图像数据是 base64 编码的，但您还使用 unescape 和 encodeURIComponent.

对其进行了转换

为什么不将图像数据提取为二进制数据结构（需要现代浏览器），而不是字符串：

$http.get(req, {responseType: "arraybuffer"}).
    success(function(data) {
        $scope.src = 'data:image/jpeg;base64,' + _arrayBufferToBase64(data);
    });

_arrayBufferToBase64 定义为 here.

另一种方法是安装请求拦截器，识别图像 url 并为这种情况添加 oauth headers。

Angular : 显示来自 REST 服务的图像

Angular : show image from REST Service

angularjs

image

rest

binary

base64