我是棱角分明的......
$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
答案 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" />