Question

我有api返回图像是否存在于数据库中，我必须使用带有angularJs的api在我的UI中显示该图像。

我必须传递userid并检查对应于该用户ID是否存在该用户的图像，如果存在则显示该图像否则显示虚拟图像。

AngularJs代码，用于从服务器获取图像

QAApp.controller('imgCtrl', function ($scope, $http) {
  // id is userid.
  $scope.image = function (id) {
       var request = $http({
                          method: 'GET', 
                          url: server + 'api/image/' + id,
                        });
            request.success(function(data, status, headers, config) {

            $scope.response = data;
            console.log($scope.response);
        });
  }


});

HTML code：

<div class="artst-pic pull-left">
      <img src=" " alt="" class="img-responsive" />
</div>

请告诉我该怎么做。

Answer 1

您可以将图片网址插入到模板中，如下所示：

<img ng-src="{{ imageUrl }}" />

没有必要执行AJAX请求来获取图像。 <img />标记会为您执行此操作

Answer 2

首先，使用<img>代码，您需要使用ng-src代替src

然后，您可以将$ scope.imageUrl绑定到ng-src，如：

<img ng-src="imageUrl" alt="" class="img-responsive" />

现在在您的控制器中：

request.success(function(data, status, headers, config) {
    if(data.imagePath)
    {
        $scope.imageUrl = data.imagePath;
    } else {
        $scope.imageUrl = 'http://some/defaulturl.png';
    }
});

如何使用angularJs显示从restful api中拍摄的图像？

2 个答案: