小贝子编程

Angular URL 'trustAsResourceUrl' 不起作用



我正在使用angular-file-upload.js并上传图像。当上传成功时，它返回一个URL到托管图像的位置，该URL在Azure上作为blob托管。上传成功，URL正确返回，但是当我在"images"堆栈上推送此URL以在浏览器中查看此图像时，它将无法正常工作。例如，我得到的URL看起来像这样:

"https://searlesmedia.blob.core.windows.net/event-images/4_slide-archive.jpg"

Controller.js 

uploader.onSuccessItem = function (fileItem, response, status, headers) {
    console.info('onSuccessItem', fileItem, response, status, headers);
    $scope.uploadcomplete = "Upload Successful";
    var url = $sce.trustAsResourceUrl(response);
    $scope.images.push(url);
};


<div class="row" data-ng-repeat="image in images">
    <img ng-src="{{image}}" class="img-responsive" />
</div>

你好，看起来你错过了一些东西，请查看这里:http://plnkr.co/edit/1PpscI4dOMYpYRf6fbUS?p=preview

angular.module('mySceApp', ['ngSanitize'])
  .controller('AppController', ['$http', '$scope', '$sce',
    function($http, $scope, $sce) {
      $scope.image = {};
      $http.get("test_data.json").success(function(data) {
        console.log(data.url);
        // $scope.userComments = userComments;
        $scope.image.url = $sce.trustAsResourceUrl(data.url);
      });
    }
  ]);
HTML:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example64-production</title>

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.16/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.16/angular-sanitize.js"></script>
  <script src="script.js"></script>

</head>
<body ng-app="mySceApp">
  <div ng-controller="AppController as myCtrl">

    <div class="well">
      <b>{{userComments.name}}</b>:
      <img ng-src="{{image.url}}">
      <br>
    </div>
  </div>
</body>
</html>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium