Question

我正在使用此指令将jCrop与Angular一起使用：http://plnkr.co/edit/Z2IQX8s9UK6wQ1hS4asz?p=preview

当我加载src的值时，我收到此错误：

无法插值：{{profileImg}}错误：[$ sce：insecurl]

然后它将我链接到一个说明这一点的页面：

$ sceDelegate policy不允许阻止从url加载资源。

我的HTML就是这样：

<img-cropped src={{profileImg}} selected='selected(cords)'/>

当我将$scope.profileImg更改为我的图片的网址时，会发生此错误。

我正在链接到S3，我从profileImg获取值。我相信这个来源，所以我怎么能告诉angular这个来源是否足以让这个指令有效？

如果我将src硬编码为我的图片，我就不会遇到这个问题。

编辑：

我试图用$ sce来信任这个网址。

我的控制器：

cmsApp.controller('PresentationCtrl',function($scope, $upload, all, $sce){

var socket = io.connect('https://xxxxxx.xxxxxxxxxxxxxx.xxx:3000');
$scope.profileImg="";



$scope.uploadProfilePic = function(){
    socket.removeAllListeners();
    console.log(file3);
    var url = 'https://xxxxxxx.xxxxxxxxxx.xxx:3000/uploadProfile?tenant=xxxxx';

    $scope.upload = $upload.upload({
        url:url,
        data:{myObj:'test1'},
        file:file3
    }).progress(function(evt){
        console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
    }).success(function(data,status,headers,config){
        $sce.trustAsUrl(data);
        $scope.profileImg = data;
    });
};
});

即使使用trustAsUrl，它也会抛出相同的错误。

可能是我正在尝试从本地nginx服务器连接它？

EDIT2：

我将它移动到S3托管，它工作。我想要链接到的图像也在S3上。我把它移到了EC2实例上的Apache Web服务器上，但它没有用。

我正在使用所有答案，ng-src代替src，$sce.trustAsUrl(url)和$compileProvider

Answer 1

有时阅读有关$sce

的文档很有用

这是将所有blob和数据列入白名单的替代方法：仅针对<img>标记的图片/ *网址，但还有其他方法可以解决此问题，例如生成网址＆gt;将其传递给其中一个sce函数，它将被列入白名单。喜欢@NuclearGhost说

app.config(["$compileProvider" function($compileProvider) {

    $compileProvider.imgSrcSanitizationWhitelist(/^\s*(blob:|data:image)/);

}]);

Answer 2

如果您想将网址添加为可信来源，可以使用trustAsUrl()服务中的ng.$sce方法

这是angular documentation for the service。

Answer 3

我最后只用$sceProvider.enabled(false)将其关闭。

角度不安全的网址

编辑：

EDIT2：

3 个答案: