如果生成的图像URL不具有角度,则如何返回默认图像URL

时间:2014-12-25 17:52:53

标签: angularjs

我是棱角分明的......

$scope.imageUrl[0] = 'images/' + $scope.repos[i].name + '.png';
$scope.imageUrl[1] = 'images/placeholder.png';

$scope.repos[i].imgSrc = (Utils.isImage($scope.imageUrl[0])) ? $scope.imageUrl[0] : $scope.imageUrl[1];

Utils.isImage()来自以下工厂:

app.factory('Utils', function($q) {
return {
  isImage: function(src) {

    var deferred = $q.defer();

    var image = new Image();
    image.onerror = function() {
      deferred.resolve(false);
      return false;
    };
    image.onload = function() {
      deferred.resolve(true);
      return true;
    };

    image.src = src;

    return deferred.promise;
   }
 };
});

图像URL是从api响应对象生成的。我正在使用Utils.isImage()来检查生成的图像URL是否存在于服务器上的images文件夹中。 但是,即使在服务器上找到图像或找不到图像,(Utils.isImage($ scope.imageUrl [0]))仍然为真。 我该如何解决这个问题?

Plunker链接 - portfolio

2 个答案:

答案 0 :(得分:0)

Utils.isImage函数返回承诺,因此始终为true

Angular使用$q服务来提供异步功能。 (documentation

要正确处理承诺,您至少应使用then()功能,并为已解决的已拒绝的承诺提供回调。

Utils.isImage($scope.imageUrl[0])).then(
   function() {
      // Here is true  
      $scope.repos[i].imgSrc = $scope.imageUrl[0]
   },
   function() {
      // Here is false
      $scope.repos[i].imgSrc = $scope.imageUrl[1]
   }
)

答案 1 :(得分:0)

你可以简单地写一个这样的指令:

myAppModule.directive('noImageIcon', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attr) {
            var defaultURL = attr.defaultURL || 'images/plaecholder.png';

            attr.$observe('ngSrc', function(newValue) {
                if (!newValue) {
                    element.attr('src', defaultURL);
                } else {
                    var image = new Image();
                    image.onerror = function() {
                         element.attr('src', defaultURL);
                    };
                    image.onload = function() {
                    };

                    image.src = newValue;
                }
            });
        }
    };
});

现在你的图片html标签就像:

<img ng-repeat="repo in repos" ng-src="images/{{repo.name}}.png" />