Take the 2-minute tour ×

I am using to show images, by iterating, say through i. But for some of the entry the image may actually be missing. Is there a way to avoid the broken link icon to be shown? (i.e. skip the element if the image cannot be found)

share|improve this question
I think you missed some words –  Mike Robinson Aug 31 '12 at 18:19
You may be interested in this question: stackoverflow.com/questions/2792923/… –  Mike McCaughan Aug 31 '12 at 18:22
Use OnError attribute of the img tag. –  Hanlet Escaño Aug 31 '12 at 18:24
@StCee - could I suggest you accept some answers for questions you've asked in the past? Please see meta.stackexchange.com/questions/5234/… -- if you don't participate in the process, you might have a hard time getting help in the future! –  Chris Baker Aug 31 '12 at 19:50

5 Answers 5

up vote 1 down vote accepted

I assume you have some code like this:

var imgs = document.getElementsByTagName('img');

to populate a variable with some images. You can just set the onerror method of the image tag (as mentioned in other answers) to handle the missing images however you want.

This will remove <img> tags whose images do not load:

for (var i in imgs)
    imgs[i].onerror = function() {
        this.style.display = 'none';

If you wanted to then load missing_image.jpg instead of making the tags disappear (be careful with this one because the browser probably won't detect the infinite loop you can get into if missing_image.jpg doesn't exist...):

for (var i in imgs)
    imgs[i].onerror = function() {
        this.src = 'missing_image.jpg`;


  1. Javascript Image Object: http://www.w3schools.com/jsref/dom_obj_image.asp
  2. Html Tag: http://www.w3schools.com/tags/tag_img.asp
share|improve this answer

Outside of making AJAX calls to the image locations to verify you get a 200 result and then showing/hiding accordingly, I can't think of a good way.

Why not just fix the broken image links?

share|improve this answer

Sure... you several things you can do:

Keep the broken Image size
If you know the size of the supposed image you can force it using css.

.img-broken {
   width: 250px;
   height: 250px;
   display: block;

Have an image replacement
You want to replace the place-holder with something better.

<img src="..." onerror="this.src='/img/broken_img_error.jpg';">

Erase the image altogether
See @Slave answer.

share|improve this answer

Try this:

<head runat="server">
    function removeElement(elem) {
        var div = document.getElementById("mainDiv");
    <div id="mainDiv">
        <img  onerror='removeElement(this);' src="icon.png" />
share|improve this answer

I don't think javascript is the best approach here at all.

If you can't fix or rely on images always actually existing (it happens, I know), the easiest way to prevent the broken image is to place an .htaccess file (or the equivalent, depending on your hosting environment) in your images folder.

The great thing about this approach is that there aren't any worries about browser support. This happens on the server, so the user could be using some ancient proprietary AOL 4.0 browser with javascript disabled and this would still work; you don't have to contend with user agent differences or javascript disabled at all.

I use this one for my user images. The image path is in the database, and sometimes for various reasons, the image specified in the database isn't actually in the folder. This is the contents of the .htaccess file located in images/users/

RewriteEngine On
RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ images/users/default.png [R=301,L]

What this does is silently forwards any requests for non-existent files to the file default.png, which is my "no photo available" image. Now, if a request for images/users/this-does-not-exist.png comes in, the file default.png will be served instead. No broken images!


share|improve this answer

Your Answer


