How To Style Broken Images

The image has disappeared In this tutorial we're going to look at how you can customise broken images like the above to make them a bit more user friendly to the visitors of your site. There are 3 methods that you can choose to use when customising broken images:

• Alt attribute
• CSS styling to make broken images look better
• jQuery replace broken image

#Alt Attribute

The first thing you need to do and the easiest way of adding some text to your images when they're broken is by using the alt attribute. This is used as a way of describing your images. The alt attribute is useful for search engines as it gives them a way of understanding the context of the image along with the filename.

<img src="cantfindthisimage.com/image.jpg" alt="I've lost the image" />

#CSS Styling

You can't style the way that the broken images look like but you can use pseudo-elements to create new elements that override the broken image styling with your own. The default broken images will look like the below It will automatically display the alt attribute with a broken image icon, there is a border around this which doesn't look great so we can start this by changing the styling to remove this border, like below.

<img class="remove-border-broken-image" src="cantfindthisimage.com/image.jpg" alt="Image of stuff" />

This is done by using :after to create a new element that sits on top of the broken image so we can style it however we want.

<img class="remove-border-broken-image" src="cantfindthisimage.com/image.jpg" alt="Image of stuff" />

First we need to add a position: relative to the image so that we can absolute position the :after element on top of the image.

img.remove-border-broken-image
{
    position: relative;
    width: 100%;
}

Then we add a :after element to the broken image this is absolute positioned so will be placed onto of the broken image. Using the content property we can pick up the alt attribute and display this on our new image.

img.remove-border-broken-image:after {
    content: attr(alt);
    font-size: 20px;
    display: block;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
}

The next example shows how we can use the :before and :after pseudo element to fully customise how your images look.

<img class="styled-broken-image" src="cantfindthisimage.com/image.jpg" alt="Image of stuff" />

Start off by adding your broken image to the page.

<img class="styled-broken-image" src="cantfindthisimage.com/image.jpg" alt="Image of stuff" />

Next we're going to make the image full width and center the text so that the alt attribute text is placed in the middle of the image area.

img.styled-broken-image
{
    position: relative;
    width: 100%;
    display: block;
    text-align: center;
}

Using the :after pseudo element we can style the element to be a grey box area with the text being the image alt attribute followed by , please fix it! as a way of alerting the admin user of the site.

img.styled-broken-image:after
{
    content: attr(alt) ", please fix it!";
    font-size: 20px;
    display: block;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ddd;
    height: 100%;
    padding: 3% 2% 3%;
    margin-bottom:2%;
    border: 2px dashed #999;
    cursor: pointer;
}

We can now use the :before pseudo to add a question mark to the box area to for additional styling to the image area.

img.styled-broken-image:before
{
    content: "?";
    display: block;
    position: absolute;
    z-index: 3;
    font-size: 40px;
    top: 15%;
    left: 0;
    right: 0;
    bottom: 0;
}

#jQuery Replace Images

You can also use the jQuery solution and replace the image URLs with a broken image URL to have a placeholder for all your broken images. Using the error event you can find all images that cause an error like 404 source not found.

$('img').on('error', function () {
    // do stuff to the broken images
});

What we can do is simply replace the broken images source to a placeholder image.

$('img').on('error', function (){
    $(this).prop('src', 'img/broken-image.png');
});

Or you have the option to simply hide them from the page.

$('img').on('error', function (){
    $(this).hide();
});