Angular js - isImage( ) - check if it's image by url

Question

Is it possible to check if by a given url the image exists and it's an image resource ?

for example:

angular.isImage('http://asd.com/asd/asd.jpg')

Or it's just a stuff for the server side ?

NO JQUERY please i'm not using it

Solution 1

I think the best javascript approach would be to use HTMLImageElement object with deferred object:

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;
}

Usage:

isImage('http://asd.com/asd/asd.jpg').then(function(test) {
    console.log(test);
});

Using HTMLImageElement gives you some benefits: not only it tests that the file is downloadable but also it is valid image resource that can be displayed by img tag.

I wrapped this code in simple service to make a test and it seems to work:

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
        }
    };
});

Demo: http://plnkr.co/edit/u5F6FfO3dEkNSMYV1amo?p=preview

Solution 2

You can use ng-src

<img ng-src="" />

Another way is you check if the it exists using the http module.

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";
});

Comments

[itsme]

sorry i forgot to specify i do not use jQuery :) i appriciate the same, thanks

[Thalaivar]

@sbaaaang: I have also mentioned the Angular way using ng-src attribute and the other way is to check via server side which you have already mentioned in your thread

[itsme]

i did not -1 , i gave you +1 actually, but please remove jquery part and if you can please specify how to use ng-src could be awesome !! thanks a lot

[Thalaivar]

@sbaaaang: dfsq gave a better answer, i would have loved it if it was a directive.

[jpgrassi]

For those with the same problem, this is a cool answer using a directive. Tested works perfectly. stackoverflow.com/a/17122325/2689390

[Thalis K.]

@dfsq You isImage() has a typo; in both onerror and onload you use resolve(). First one should be reject(). Apart from that, neat solution.

[dfsq]

@ThalisK. It's not a typo, I deliberately resolve (with false flag) in case of image unavailability, it doesn't feel to me like exceptional situation, so resolve is better. Plus for this functionality it would not be convenient to have both success and error handlers just in order to set proper flag $scope.result = result;.

[Thalis K.]

@dfsq True, in your case it doesn't make sense. I was misled by my application of your answer, where the promise rejection callback does different work from the success one and it was not being called. All clear.

[dsdsdsdsd]

for those who don't know what the $q is, see: docs.angularjs.org/api/ng/service/$q

[Clark]

I believe this will cause a memory leak in chrome. Every image you check will create a new Image() object and this reference can hang around. See stackoverflow.com/questions/21309760/…

[dfsq]

@Clark I don't think so, just made some tests and looks like memory is not leaking.