角度URL“trustAsResourceUrl”无法正常工作

本文介绍了角度URL“trustAsResourceUrl”无法正常工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用并上传图片。上传成功后，它会返回托管图像的URL，该图像在Azure上作为blob托管。
上传成功，并且URL正确返回，但是当我在images堆栈上推送此URL以在浏览器中查看此图像时，它将无法正常工作。例如，我回来的网址如下所示：

I'm using angular-file-upload.js and uploading an image. When the upload is successful, it returns a URL to where the image is hosted, which is hosted as a blob on Azure.The upload is successful, and the URL is returned correctly, however when I push this URL on an "images" stack to view this image in the browser, it won't work properly. For example, the URL I get back looks like this:

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

Html

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

推荐答案

好像你错过了什么，请看这里：

Hi it looks like you miss something please see here: 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>

这篇关于角度URL“trustAsResourceUrl”无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！