Hide Image Errors via CSS/HTML (Broken Image Handling)

Rating: 9
Comments: 3

Hide Image Errors via CSS/HTML (Broken Image Handling)

15 Jun 2015 18:39

Here is a fix for hiding image errors (Broken Images) using just a little bit of CSS (granted you are using DocType XHTML 1.0 Transitional or greater in your source code). This is the way to hide the error WITHOUT the use of Javascript!

As you may have noticed on each IconDeposit Member Profile, we do not hide the image error using Javascript, we use CSS to hide the image error. Using the DocType XHTML 1.0 Transitional or greater and a little bit of CSS you will be able to pull this off. This is the easy way to do this for people who aren't too tech savy with Javascript.

Next just add the "alt" attribute to your img html like so:

<img src="#" href="#" alt="foo-bar" />

And finally here is the CSS code that does the trick (snippet from demo version):

img.error-not-fixed, img.error-fixed{
    display:inline-block;
    position:relative;
    width:128px;
    height:128px;
    border:15px solid #fff;
    border-radius:1px;
    margin:0px;
    background:#fff!important;
}
img.error-fixed {
    background: #CCC url(../YOUR-IMAGE-HERE.PNG) 0 0 no-repeat!important;
    text-indent: -9999px;
    border: 15px solid #fff;
    color: transparent!important;
    -webkit-appearance: none!important;
}

Keep in mind, you will need to add the "alt" attribute to your image. This would be the only thing besides the DocType as far as HTML goes that you would need to change/add.

As far as I know, this is the only CSS image error handling trick out there that works without Javascript.

View the Demo: http://www.icondeposit.com/local--files/start/Hide%20Image%20Errors%20via%20CSS.html
Original URL: http://www.icondeposit.com/code:5
License Info: Creative Commons Attribution 3.0