How to check if image exists with given url?
I want to check if an image exists using jquery.
For example how do I check this image exists
http://www.google.com/images/srpr/nav_logo14.png
the check must give me a 200 or status ok
--------------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
Use the error
handler like this:
$('#image_id').error(function() {
alert('Image does not exist !!');
});
If the image cannot be loaded (for example, because it is not present at the supplied URL), the alert is displayed:
Update:
I think using:
$.ajax({url:'somefile.dat',type:'HEAD',error:do_something});
would be enough to check for a 404.
More Readings:
- http://www.jibbering.com/2002/4/httprequest.html
- http://www.ibm.com/developerworks/web/library/wa-ajaxintro3/
Update 2:
Your code should be like this:
$(this).error(function() {
alert('Image does not exist !!');
});
No need for these lines and that won't check if the remote file exists anyway:
var imgcheck = imgsrc.width;
if (imgcheck==0) {
alert("You have a zero size image");
} else {
//execute the rest of code here
}
$.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
if it doesnt exist load default image or handle error
$('img[id$=imgurl]').load(imgurl, function(response, status, xhr) {
if (status == "error")
$(this).attr('src', 'images/DEFAULT.JPG');
else
$(this).attr('src', imgurl);
});
Use Case
$('#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 here risk managment .
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
'