How to Style Broken Images

The image has disappeared:

In this tutorial, we're going to look at how you can customize broken images like the above to make them a bit more user-friendly to the visitors of your site.

There are three methods that you can choose to use when customizing broken images:

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

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 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 so:

It will automatically display the alt attribute with a broken image icon, but there is a border around this which doesn't look great - so we can start by changing the styling to remove this border, like below:

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 an :after element to the broken image that is absolute positioned so it will be placed onto 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 elements to fully customize how your images look.

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 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 a 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();
});