角：从REST服务形象展示 [英] Angular : show image from REST Service

问题描述

在reseaches和测试...我还是不能显示在我的角度应用的图像形式REST API。我有我的REST Web服务提供的图片，为什么我使用REST服务？由于访问需要进行身份验证（我使用OAuth 2协议），以及...当我用邮差（REST客户端非常有用的）一切都很正常，显示图像不无所事事。但是，当我尝试$ HTTP它不工作后角，以显示它...

After reseaches and tests... I still can't show an image form ReST API on my Angular App. I have images available on my ReST web service, why do I use a ReST service ? Because for accessing you need to be authenticated (I use oAuth 2 protocol), well... When I use POSTMan (ReST client very usefull) everything works great, the image is displayed without doing nothing. But when I try to display it with Angular after a $http it doesn't work...

下面是收到的报头格式的服务：

Here are the headers received form the service :

内容长度→51756
内容类型→图像/ JPEG;字符集=二进制
服务器→阿帕奇/ 2.4.9（Win64的）PHP / 5.5.12
的X技术，通过→PHP / 5.5.12

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

下面是我的角code：

Here is my Angular code :

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

和我的HTML：

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

有关信息，我用角的base64（ https://github.com/ninjatronic/angular-base64 ）为encodage。如果没有UNESCAPE和EN codeURIComponent我有一个错误，我试图删除空格，但它仍然无法正常工作...

For information I use angular-base64 (https://github.com/ninjatronic/angular-base64) for the encodage. Without "unescape" and "encodeURIComponent" I have an error, I've tried to remove white spaces but it still doesn't work...

感谢您：）

推荐答案

似乎因为你告诉图像数据的base64 EN codeD浏览器这是不行的，但你也有<$ C $把它改造C> UNESCAPE 和连接codeURIComponent 。

Seems that this will not work since you tell the browser that the image data is base64 encoded, but you also transformed it with unescape and encodeURIComponent.

你为什么不获取图像数据转换成二进制数据结构（需要一个现代浏览器），而不是为一个字符串：

Why don't you fetch your image data into a binary data structure (requires a modern browser), instead of into a string:

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

_arrayBufferToBase64 定义<一个href=\"https://stackoverflow.com/questions/9267899/arraybuffer-to-base64-en$c$cd-string\">here.

一个不同的方法是安装一个请求拦截，识别图像的URL，并添加OAuth的头对于这种情况。

A different approach would be to install a request interceptor, recognize the image url and add the oauth headers for this case.

这篇关于角：从REST服务形象展示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！