Css image error

Despite what people are saying here, you don’t need JavaScript at all, you don’t even need CSS!

It’s actually very doable and simple with HTML only.
You can even show a default image if an image doesn’t load. Here’s how…

This also works on all browsers, even as far back as IE8 (out of 250,000+ visitors to sites I hosted in September 2015, ZERO people used something worse than IE8, meaning this solution works for literally everything).

Step 1: Reference the image as an object instead of an img. When objects fail they don’t show broken icons; they just do nothing. Starting with IE8, you can use object and img tags interchangeably. You can resize and do all the glorious stuff you can with regular images too. Don’t be afraid of the object tag; it’s just a tag, nothing big and bulky gets loaded and it doesn’t slow down anything. You’ll just be using the img tag by another name. A speed test shows they are used identically.

Step 2: (Optional, but awesome) Stick a default image inside that object. If the image you want actually loads in the object, the default image won’t show. So for example you could show a list of user avatars, and if someone doesn’t have an image on the server yet, it could show the placeholder image… no JavaScript or CSS required at all, but you get the features of what takes most people JavaScript.

Here is the code…

<object data="avatar.jpg" type="image/jpeg">
    <img src="default.jpg" />
</object>

… Yes, it’s that simple.

If you want to implement default images with CSS, you can make it even simpler in your HTML like this…

<object class="avatar" data="user21.jpg" type="image/jpeg"></object>

…and just add the CSS from this answer -> https://stackoverflow.com/a/32928240/3196360

Broken images are ugly.

But they don’t always have to be. We can use CSS to apply styles to the <img> element to provide a better experience than the default.

Two Facts About The <img> Element

To understand how we can style broken images, there are two facts about the way the <img> element behaves that we need to understand first.

1. We can apply regular typography-related styling to the <img> element. These styles will be applied to the alternative text, if it is displayed, and will not affect the working image.

2. The <img> element is a replaced element. This is an element “whose appearance and dimensions are defined by an external resource” (Sitepoint). Because the element is controlled by an external source, the :before and :after pseudo-elements typically shouldn’t work with it. However, when the image is broken and not loaded, these pseudo-elements can appear.

Because of these two facts, we are able to apply styles to the <img> element that will only appear when the image is broken, and will leave a working image unaffected.

Putting It Into Practice

Using this information, here are some examples of how we can style broken images, using the following broken link —

<img src="http://bitsofco.de/broken.jpg" alt="Kanye Laughing">

Adding Helpful Information

One way we can handle broken images is to provide a message to the user saying that the image is broken. Using the attr() expression, we can even display the link to the broken image.

img {
  font-family: 'Helvetica';
  font-weight: 300;
  line-height: 2;  
  text-align: center;
  
  width: 100%;
  height: auto;
  display: block;
  position: relative;
}

img:before { 
  content: "We're sorry, the image below is broken :(";
  display: block;
  margin-bottom: 10px;
}

img:after { 
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
}

Replacing The Default Alternative Text

Alternatively, we can use the pseudo-elements to replace the default alt text that shows, by positioning the pseudo-element on top of the default text, hiding it from view.

img { /* Same as first example */ }

img:after { 
  content: "f1c5" " " attr(alt);
  
  font-size: 16px;
  font-family: FontAwesome;
  color: rgb(100, 100, 100);
  
  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

In addition to (or instead of) displaying a custom message, we can use the pseudo-elements to apply more styling to the broken image.

img { 
  /* Same as first example */
  min-height: 50px;
}

img:before { 
  content: " ";
  display: block;

  position: absolute;
  top: -10px;
  left: 0;
  height: calc(100% + 10px);
  width: 100%;
  background-color: rgb(230, 230, 230);
  border: 2px dotted rgb(200, 200, 200);
  border-radius: 5px;
}

img:after { 
  content: "f127" " Broken Image of " attr(alt);
  display: block;
  font-size: 16px;
  font-style: normal;
  font-family: FontAwesome;
  color: rgb(100, 100, 100);
  
  position: absolute;
  top: 5px;
  left: 0;
  width: 100%;
  text-align: center;
}

If the image is not broken, with all the same styles applied to the element, the image is displayed normally. The pseudo-elements are not generated at all.

Browser Compatibility

Unfortunately, not all browsers handle broken images in the same way. For some browsers, even though the image is not displayed, the pseudo-elements don’t show up at all.

Here’s what I’ve found from my tests —

* The alt text will only show if the width of the image is large enough to accommodate it. If no width is specified for the img, the alt text may not be displayed at all
** Font styling not applied

For browsers that don’t support the pseudo-elements, the styles applied are ignored, so they don’t interfere in a breaking way. This means that we can still apply the styles and serve a more pleasant experience for users on a supporting browser.