Можно ли проверить, существует ли на данном URL-адресе изображение и ресурс изображения?
например:
angular.isImage('http://asd.com/asd/asd.jpg')
Или это просто материал для серверной части?
NO JQUERY, пожалуйста, я не использую его
Можно ли проверить, существует ли на данном URL-адресе изображение и ресурс изображения?
например:
angular.isImage('http://asd.com/asd/asd.jpg')
Или это просто материал для серверной части?
NO 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
}
};
});
Вы можете использовать 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){
};
});
Update:
HTML
<div ng-controller="Ctrl">
<img ng-src="{{src}}" isImage />
</div>
JS
var app = angular.module('app', []);
app.directive('isImage', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('load', function() {
alert('image is loaded');
});
}
};
});
app.controller('Ctrl', function($scope) {
$scope.src ="http://asd.com/asd/asd.jpg";
});