通过ajax以角度加载图像

Question

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

1. 如何将ajax data / blob变为变量
2. 如何在指令
中进行ajax调用

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

https://developer.chrome.com/apps/contentSecurityPolicy

Answer 1

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

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

更新了小提琴 - http://jsfiddle.net/1koLs9fh/2/

更新网址

您需要将ng-src绑定到某个变量。在AJAX响应中更新此变量。

    <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';       
        }
    }
);

http://jsfiddle.net/1koLs9fh/