Question

在研究和测试之后，我仍然无法在我的Angular App上显示ReST API的图像。我的ReST网络服务上有图像，为什么我要使用ReST服务？因为为了访问你需要进行身份验证（我使用oAuth 2协议）。当我使用POSTMan（ReST客户端非常有用）时，一切都很好，图像显示没有任何作用。但是当我尝试在$ http之后用Angular显示它时它不起作用。

以下是从服务中收到的标题：

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标头。

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

1 个答案: