angularjs之如何从 AngularJS 中的 $http.get 返回图像

在我的 Controller 中，我调用了一个返回 promise 的服务

var onComplete = function(data) { 
               $scope.myImage = data;            
            }; 

在我的服务中，我通过将 url 直接传递给图像本身来调用以获取图像:

   return $http.get("http://someurl.com/someimagepath") 
         .then(function(response){           
          return response.data; 
         }); 

所有的调用都成功了并且 response.data 似乎保存在里面的图像中:

����JFIF��;CREATOR: gd-jpeg v1.0 (using IJG JPEG v80), quality = 90 
��C 
 
 
 
 
��C       
 
����"��  
���}!1AQa"q2���#B��R��$ 

虽然我不确定它是否真的存在，因为我无法显示它。我试过(在 index.html 内)

 <img ng-src="{{myImage}}">  
  and 
<img ng-src="{{myImage}}.jpeg">  
  and    
 <img ng-src="data:image/JPEG;base64,{{myImage}}"> 

想法？
是否可以从 $http.get 返回实际图像并将其响应转换回图像(jpeg 等)？

谢谢!

请您参考如下方法:

返回的图像在 binary encoding , 而不是 Base64。

可以理解，<img>标签不支持通过属性从二进制中获取资源，因此您必须查看另一种解决方案。

您可以尝试在客户端使用 TypedArrays 将二进制编码转换为 Base64连同 btoa 功能。然后你就可以使用

<img ng-src="data:image/JPEG;base64,{{myImage}}"> 

This guide Mozilla 的 a 涵盖了对图像发出 XHR 请求并将其直接读入 UInt8Array .这应该是一个很好的起点。

它是为普通的旧 Javascript 编写的，但如果您只是在学习绳索，将其翻译成 Angular 应该是一个很好的练习。