是否可以通过给定的url检查图像是否存在并且它是图像资源?
例如:
angular.isImage('http://asd.com/asd/asd.jpg')
或者它只是一个服务端的东西?
请不要使用JQUERY
我认为最好的javascript方法是使用HTMLImageElement对象和延迟对象:
function isImage(src) {
var deferred = $q.defer();
var image = new Image();
image.onerror = function() {
deferred.resolve(false);
};
image.onload = function() {
deferred.resolve(true);
};
image.src = src;
return deferred.promise;
}
用法:
isImage('http://asd.com/asd/asd.jpg').then(function(test) {
console.log(test);
});
使用HTMLImageElement
有一些好处:它不仅可以测试文件是可下载的,而且它是有效的图像资源,可以通过img
标记显示。
我将这段代码包装在简单的服务中以进行测试,它似乎可以工作:
app.controller('MainCtrl', function($scope, Utils) {
$scope.test = function() {
Utils.isImage($scope.source).then(function(result) {
$scope.result = result;
});
};
});
app.factory('Utils', function($q) {
return {
isImage: function(src) {
// ... above code for isImage function
}
};
});
演示:http://plnkr.co/edit/u5F6FfO3dEkNSMYV1amo?p=preview
您可以使用 ng-src
<img ng-src="" />
另一种方法是使用http
模块检查它是否存在。
var app = angular.module('myapp', []).run(function($http){
$http.get('http://asd.com/asd/asd.jpg',
//success
function(data){
};
});
更新: