Question

我想从服务器显示图像，我的功能是：

$scope.getImage = function() {

        $http({method: 'GET', url: 'http://url.com/provawp/api/user/get_avatar/?user_id=1&type=full'}).
        success(function(data, status, headers, config) {

            var img=data.avatar;
            var element = $('<div>').html(img);
            var source = element.find('img').attr("src");
            return source;
            console.log("immagine" + source);

         }).
         error(function(data, status, headers, config) {

             console.log("errore avatar");
         });
     }

我检索我的img，然后我想显示到我的html：

   <ons-list-item  class="list-item-container">
      <div class="list-item-left">
        <img ng-src="{{getImage()}}" class="avator">
      </div>
      <div class="list-item-right">
        <div class="list-item-content">
          <div class="name">{{post.author.name}}</div>
          <span class="desc">{{formatDate(post.date)  |  date:"dd/MM/yyyy"}}         </span>
        </div>
      </div>
    </ons-list-item>

显然页面中有一个控制器;当我运行我的日志时出现错误：

未捕获错误：[$ rootScope：infdig] 10 $ digest（）迭代达成。中止！观察者在最近5次迭代中被解雇：[]

我的Json数据是：

  {"status":"ok","avatar":"<img src=\"http:\/\/url.com\/provawp\/wp- content\/uploads\/2015\/06\/rest5b-150x150.jpg\" width=\"150\" height=\"150\" alt=\"admin\" class=\"avatar avatar-150 wp-user-avatar wp-user-avatar-150 alignnone photo\" \/>"}

Answer 1

不是使用ng-src插入指令调用{{}}属性中的函数，而是通过ajax加载图像URL，这是不合理的。与每个digest周期$http呼叫接听电话＆amp;造成以下错误

未捕获错误：[$ rootScope：infdig] 10 $ digest（）迭代达成。中止！观察者在最近5次迭代中被解雇：[]

为避免此类错误，请将ajax接收到的值分配到某个范围变量＆amp;将该范围变量绑定在ng-src属性中。

在控制器负载上调用getImage方法是更好的主意。

<强>标记

<img ng-src="{{myImage}}" class="avator">

<强>代码

$scope.getImage = function() {
    $http({
        method: 'GET',
        url: 'http://url.com/provawp/api/user/get_avatar/?user_id=1&type=full'
    }).
    success(function(data, status, headers, config) {
        $scope.myImage = data.avatar;
        //return source; //no need to return data
    }).
    error(function(data, status, headers, config) {
        console.log("errore avatar");
    });
};
$scope.getImage(); //call this from the controller init.

如何在angularJS中从服务器显示img

1 个答案: