Question

I have a url in javascript, set as a variable. Like:

var imageurl='example.com/test/real/image.jpg';

I am trying to recognize if this is an image url or not (ending with jpeg, jpg, gif, png etc.).

I tried using charAt but it did not work.

What’s the best way to return a 1 if it is an image url and 0 otherwise using javascript?

Answer 1

I am trying to recognize if this is an image url or not (ending with jpeg, jpg, gif, png etc.).

The file extension (if there even is one) has no bearing on whether a URL points to a resource that is an image type. That is only a convention used by some people for static resources.

Looking at the file extension can be enough if you only need it as a general heuristic:

// User browser's built-in URL parsing to discard query string etc
//
var a= document.createElement('a');
a.href= url;
var ext= a.pathname.split('.').pop().toLowerCase();
var mightbeimage= ext=='gif' || ext=='jpeg' || ext=='jpg' || ext=='png';

but for accuracy the only way to find out if a URL points to an image is to fetch that URL and see what comes back. Typically you’d do that by issuing a HEAD request to the URL and seeing if the headers in the response contain Content-Type: image/something.

You can’t do that directly from browser JavaScript, but what you can do is create an image element and see if loads OK:

function checkImage(url, callback) {
    var img= new Image();
    img.onload= function() { callback(true); }
    img.onerror= function() { callback(false); }
    img.src= url;
}

checkImage('http://www.google.co.uk/images/srpr/logo3w.png', function(isimage) {
    if (isimage)
        alert('Yes, it is an image');
    else
        alert('Nope, not an image, or does not exist or other error');
});