How to determine there is no image on the specified path

Question

I want to know how can i determine whether an image is available on the specified path or not. I want to display an error message if there is no image on the specified path...

For eg:

<img src="images/products/default.bmp" alt="NoImage"/>

but if there is no image default.bmp on this path then alt Noimage will be displayed but apart from this i also want to display an error message...for this i need to determine that there is no image, how can i. Please Reply

Thanks Romi

possible duplicate of [jQuery/Javascript to replace broken images](http://stackoverflow.com/questions/92720/jquery-javascript-to-replace-broken-images) — mplungjan, Jun 13 '11 at 06:04

score 0 · Answer 1 · answered Jun 13 '11 at 05:58

0

Use the img "onerror" event, e.g.

<img id="image" alt='img' src="myImg.gif"/>
<script>
function noImg() {
    alert("Can't find image!");
}
document.getElementById("image").onerror = noImg;
</script>

It gets fired if the img src can't be found or loaded.

answered Jun 13 '11 at 05:58

squidbe

1,012
1
8
13

@squidbe: Thanks, is there any function of this type available in juquery?? – Romi Jun 13 '11 at 06:01
Too late to add the onError AFTER the load. – mplungjan Jun 13 '11 at 06:03
@mplungjan, not sure what you mean. It works fine. [Here's a jsfiddle](http://jsfiddle.net/squidbe/hFqTA/). – squidbe Jun 13 '11 at 06:22
You cannot assign oneror to an image after the image tag unless the image tag has no image in it. The onerror will only trigger if the connection to the server takes longer than the assignment. If you do not do – mplungjan Jun 13 '11 at 06:47
@mplungjan, ah, I see your point. Yes, if there's a significant amount of processing that occurs between the attempt to load an src and the declaration of its onerror handler, the server response could actually occur before onerror is defined, in which case it'd be better to use onerror() inline as you suggest or to create the tag dynamically via DOM methods to ensure the request isn't made before the declaration of the onerror handler. – squidbe Jun 16 '11 at 18:28

score 0 · Accepted Answer · answered Jun 13 '11 at 06:04

0

Using jQuery

$('img').error(function(){
    console.log('error');
});

Another way

var img = document.getElementsByTagName('img')[0];
if(img.complete){
    console.log('loaded');
}else{
    console.log('not loaded');
}

answered Jun 13 '11 at 06:04

jaime

41,961
10
82
52

Can i use $('img').error(function() after – Romi Jun 13 '11 at 06:21
@Romi, if you're asking whether you your jQuery script can appear later in the file than your img tag, yes, it most certainly can. – squidbe Jun 13 '11 at 06:32
@squidbe I have not tested this, but I would only expect the jQuery onError going to trigger if the assignment is done onDomReady - onload it is too late in my opinion – mplungjan Jun 13 '11 at 07:43

score 0 · Answer 3 · answered Jun 13 '11 at 06:05

0

You can also check the width of the image, if it is 0:

if ( $(‘#imageID’).getwidth() == 0 ) {
    alert("Can't find image!"); 
}

answered Jun 13 '11 at 06:05

Stephane Gosselin

9,030
5
42
65

How to determine there is no image on the specified path

3 Answers3