Hide broken images

February 16th, 2009. Tagged: images

I know, you don't have broken images on your site, it's unprofessional and ugly. But sometimes you may be loading images that you don't control and you never know what's going on on the other server you're expecting to serve, but it may not feel up to the task.

One nice and simple strategy to deal with this uncertainty is to hide the images that fail to load. Browsers sent an "error" event when the worst happens and an image fails for whatever reason. Subscribe to this event using your favorite event-listener-attaching approach or library and hide the image.

Or with some ugly old-school inline event handler:

<img 
  src="broken.png" 
  onerror="this.style.display='none'"
/>

Simple, eh?

Tell your friends about this post: Facebook, Twitter, Google+

30 Responses

  1. [...] a comment » I found this small but very good article in phpied.com by Stoyan Stefanov – Twitter page. The article tells about handling broken images in a web page, [...]

  2. That’s right, this is a great way to hide broken images. That’s why I did the wp-broken-images WordPress plugin back in 2007:

    http://wordpress.org/extend/plugins/wp-broken-images/

    My plugin uses a little bit more “extended” approach, since not everyone would like to hide the broken images, but probably swap them with another image, or do some CSS styling.

    Anyway, the only downside is that this approach requires JavaScript, and if it’s not on because of some browser blocking addon, then it can’t do its thing. Fortunately those cases are happening too rarely ;)

  3. One more thing: I tried to use the “event-listener-attaching approach” but I could not get it work, because I don’t know when to start my code that attached the event listener. Using document.ready or window.load is too late, because the onerror event of the images was already triggered (prior to document.ready and window.load events). And on the other hand until the whole HTML is loaded I don’t know how many images are there. What event or approach would you suggest to do this “event-listener-attaching approach” ?

  4. Hmm, good point. Well, if DOMContentReady is too late, then inline onerror might be the only working solution. Short of following each <img> with inline <script> which is impractical and no better then inline onerror.

  5. This is really good. Thank you.

  6. [...] http://www.phpied.com/hide-broken-images/ : une technique pour ne pas afficher les images cassées [...]

  7. Hi,

    Thanks for the share.. helped me… :)

  8. woh its work.
    thanks for sharing

  9. Thank you sooooo much for this!

    Been looking EVERYWHERE so this and you have provided us with a tiny piece of gold!

    Cheeeers! :)

  10. Very nice. Makes my site a bit cleaner, with all the images automatically pulled from Amazon, I had broken images all the time.

  11. Recently came across this posting and it helped a lot. I thought I’d share something in return.

    Instead of hiding the image tag completely we needed to display a default image. This is the approach that I took building on the above code:

    onerror=”this.src=’@Href(“~/Content/Images/defaultimg.png”)’”

    This loads a default image, that I know is always there, in case the main image does not.

  12. Thank you for your post that nice easy to read. Your web site has a lot of good topics articles, I would not fail to trace the address of your web site my friend(s) and come back regularly.

  13. Thanks for the info, this works like a charm.

  14. If you think that ordering medicine from farmacia
    on line, you will have stripes from the puddles
    - keep going and blending.

  15. But not for the better part of the country will face severe
    spending cuts that are likely to be a hindrance rather
    than a help. If you’ll be renting a car and the terms can sometimes appear a little confusing, yes — and if you plan on spending a lot of your money. Orlando offers an excellent choice in terms of both convenience and affordability.

  16. Hey! Quick question that’s totally off topic. Do you know how to make your site mobile friendly? My blog looks weird when browsing from my apple iphone. I’m trying to find a template or plugin that might be able to resolve this issue.
    If you have any suggestions, please share. Many thanks!

  17. If you think that ordering medicine from farmacia on line, you will have stripes from the puddles – keep going and blending.

  18. Before jumping into a paphos car hire.

  19. Because the admin of this web site is working, no doubt very soon it will be
    well-known, due to its quality contents.

  20. When I originally left a comment I appear to have clicked
    the -Notify me when new comments are added- checkbox and now
    each time a comment is added I recieve four emails with the same comment.
    There has to be a means you are able to remove me from that service?
    Cheers!

  21. Hey I am so happy I found your weblog, I really found you by mistake, while I was searching
    on Google for something else, Regardless I am here now and would just like to say many
    thanks for a remarkable post and a all round interesting blog (I also love the theme/design), I don’t have time to look
    over it all at the moment but I have book-marked it
    and also added in your RSS feeds, so when I have time I will be back to read a great
    deal more, Please do keep up the fantastic b.

  22. I’m not sure how to implement this into my website. I am styling a page from a database and I don’t want the images to show up if there isn’t one in the directory. This seems very simple, but I can’t seem to find anything that works.

  23. sorry for clogging up your blog but I did find what I needed at
    http://stackoverflow.com/questions/8910931/detect-broken-image-using-php

    you can use the ‘onerror’ attribute directly in the image tag:

  24. Fantastic beat ! I would like to apprentice while you amend your web site, how could
    i subscribe for a blog site? The account helped me a acceptable deal.
    I had been a little bit acquainted of this your broadcast offered bright clear concept

  25. I’ve been browsing online greater than 3 hours nowadays, yet I by no means discovered any attention-grabbing article like yours. It is pretty value enough for me. Personally, if all web owners and bloggers made just right content material as you probably did, the internet will probably be a lot more useful than ever before.

  26. Howdy! I’m at work browsing your blog from my new apple iphone! Just wanted to say I love reading through your blog and look forward to all your posts! Carry on the great work!

  27. Ty for sharing, you save me. Great Work

  28. Hi! I have a serious problem with this images broken icon that I can not solve even trying all ‘solutions’ did find on internet!

    I am working with local html. The application loads the images from a USB stick, ie, we have sure that images are always present there.

    However, when clicking on the images that are links to load other pages, ‘just’ Google Chrome randomly displays for a split second the broken image icon. When the page is completely loaded the icon disappears. This does not happen with other browsers, but I can not use other browsers for the purpose it is intended the application.

    I need to record some training videos using Chrome and this bastard broken image icon is driving me crazy!

    I’ve tried all forms of error handling, disabling and replacement that I found out there, but none of this works. The problem is random and there is no ‘standard’ for browsing behavior that allows me to find other outlets.

    You can not solve by clearing the cache or decreasing the size of the images and due all content be hosted on a USB stick we know it’s not a problem of bandwidth.

    Any idea that can ‘disable’ this damn icon flashing during page loading??

    I’ll be very grateful if anyone has any solution.

    My e-mail is lito-soft@hotmail.com

    tks @>–>—

  29. You dont have to acquire a great deal of goods to warranty a fantastic time.
    He did some of his very, very best work as an expatriate. You need to have
    all your concentration to interact with them, not divert it trying to figure out
    the setting of your world.

Leave a Reply