Javascript 在angular中通过ajax加载图像

我希望通过ajax加载一个图像，即通过ajax获取图像的内容并将其显示为图像。我知道怎么做后面的部分，但是

如何将ajax数据/blob放入变量中

如何在指令中进行ajax调用

我想要图像的实际内容，而不仅仅是src/url。我想这样做是为了克服chrome应用程序的CSP限制

---

编辑：使用base64直接加载图像

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

---

我认为ajax调用指令是wrong@Dave谢谢你的第一部分。。。怎么样second@aWebDeveloper您可以将指令绑定到按钮，将

单击

事件侦听器绑定到元素（即按钮），并使用angular的

$http

服务触发ajax调用函数为什么需要在指令中进行ajax调用？即使你这样做了，方法上也没有区别。永远不要使用

src

。。。浏览器会用未编译的url发出时髦的请求，这当然会得到同意。使用ng-src。只是一个例子。我不想要src，而是想要src中的实际图像。i、 e进行ajax调用并获取实际图像，而不仅仅是src。你是指实际字节吗？@aWebDeveloper需要将该图像文件转换为base64数据URI。如果图像存储在可通过web访问的目录中，那么发送图像本身就没有意义

    <div ng-app="myApp">
        <div ng-controller="myCtrl">                
            <img ng-src="http://{{url}}"/>
            <button ng-click="loadImages()">load images</button>
        </div>
    </div>

var myApp = angular.module('myApp', []);

myApp.controller('myCtrl',
    function ($scope) {        
        $scope.loadImages = function() {
        $scope.url = 'cdn1.www.st-hatena.com/users/ho/howdy39/profile.gif';       
        }
    }
);