How to check if an image with a given URL exists?

Question

I want to check if an image exists using jquery.

For example, how to verify that this image exists

http://www.google.com/images/srpr/nav_logo14.png 

check should give me 200 or ok status

-------------- edited -------------------

 var imgsrc = $(this).attr('src'); var imgcheck = imgsrc.width; if (imgcheck==0) { alert("You have a zero size image"); } else { //do rest of code } 

Thanks jean

Answer 1

Use the error handler as follows:

 $('#image_id').error(function() { alert('Image does not exist !!'); }); 

If the image cannot be uploaded (for example, because it is not in the specified URL), a warning is displayed:

Update:

I think using:

 $.ajax({url:'somefile.dat',type:'HEAD',error:do_something}); 

will be enough to check 404.

Other readings:

• http://www.jibbering.com/2002/4/httprequest.html
• http://www.ibm.com/developerworks/web/library/wa-ajaxintro3/

Update 2:

Your code should look something like this:

 $(this).error(function() { alert('Image does not exist !!'); }); 

There is no need for these lines, and this does not check if the remote file exists:

 var imgcheck = imgsrc.width; if (imgcheck==0) { alert("You have a zero size image"); } else { //execute the rest of code here } 

Answer 2

 $.ajax({ url:'http://www.example.com/somefile.ext', type:'HEAD', error: function(){ //do something depressing }, success: function(){ //do something cheerful :) } }); 

from: http://www.ambitionlab.com/how-to-check-if-a-file-exists-using-jquery-2010-01-06

Answer 3

if it does not contain a default boot image or processing error

 $('img[id$=imgurl]').load(imgurl, function(response, status, xhr) { if (status == "error") $(this).attr('src', 'images/DEFAULT.JPG'); else $(this).attr('src', imgurl); }); 

Answer 4

Usage example

 $('#myImg').safeUrl({wanted:"http://example/nature.png",rm:"/myproject/images/anonym.png"}); 

API:

 $.fn.safeUrl=function(args){ var that=this; if($(that).attr('data-safeurl') && $(that).attr('data-safeurl') === 'found'){ return that; }else{ $.ajax({ url:args.wanted, type:'HEAD', error: function(){ $(that).attr('src',args.rm) }, success: function(){ $(that).attr('src',args.wanted) $(that).attr('data-safeurl','found'); } }); } return that; }; 

---

Note: rm means risk management here.

---

Another use case:

 $('#myImg').safeUrl({wanted:"http://example/1.png",rm:"http://example/2.png"}) .safeUrl({wanted:"http://example/2.png",rm:"http://example/3.png"}); 

• ' http://example/1.png ': if not exist ' http://example/2.png '

• ' http://example/2.png ': if not exist ' http://example/3.png '

Answer 5

From here :

 // when the DOM is ready $(function () { var img = new Image(); // wrap our new image in jQuery, then: $(img) // once the image has loaded, execute this code .load(function () { // set the image hidden by default $(this).hide(); // with the holding div #loader, apply: $('#loader') // remove the loading class (so no background spinner), .removeClass('loading') // then insert our image .append(this); // fade our image in to create a nice effect $(this).fadeIn(); }) // if there was an error loading the image, react accordingly .error(function () { // notify the user that the image could not be loaded }) // *finally*, set the src attribute of the new image to our image .attr('src', 'images/headshot.jpg'); }); 

Answer 6

jQuery 3.0 removed .error . The correct syntax is now

 $(this).on('error', function(){ console.log('Image does not exist: ' + this.id); });