Is it possible to detect broken/unloaded (error) images with CSS?

Question

I'd like to give broken/errored images some extra CSS:

img:error {
  max-width: 20px;
  max-height: 20px;
}

but that doesn't work. Is there a way with pure CSS to do this? Is there an img pseudo selector for this? Or even better: a dirty hack that works?

I've looked around, but nobody seems to be wondering =)

(Yes, I know JS can do it and I know how; no need to mention it.)

Mcintire

You can define font styles on the image selector so at the very least you can control how the alt text will display in place of the missing image. – Gaudy

will anyone else will point at the ALT attribute ? – Unapproachable

@GCyrillus The alt attribute is irrelevant to my question, but it has been mentioned. – Mcintire

ALT attributes shows up when link is broken it is needed most of time when image has meaning and can be easily used :) – Unapproachable

Answer 1

There is no way in CSS specs or drafts, but Firefox has a proprietary selector (pseudo-class) :-moz-broken. Its documentation is very concise and it says “intended for use mainly by theme developers”, but it can be used e.g. as follows:

:-moz-broken { outline: solid red }
:-moz-broken:after { content: " (broken image)" }

Although the documentation says that it “matches elements representing broken image links”, it actually matches broken images (an img element where the src attribute does not refer to an image), whether they are links or not. Presumably, “links” really means “references” here.

CSS 2.1 says: “This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.” But Selectors Level 3 (CSS3 Selectors) just says about them: “They are explained in CSS 2.1.” In practice, browsers handle them differently. Oddly enough, Firefox supports :-moz-broken:after but ignores :-moz-broken:before. It does not support either of these pseudo-elements for normal images, but img:after, too, is supported for a broken image (i.e., the specified content appears after the alt attribute value).

Shrewd

:-moz-broken:after works? :after usually doesn't work for self-closing elements. Let me fire up the old Firefox and try. – Mcintire

Interesting, but how would this work? Don't non-container elemnts like img ignore pseudo elements? – Driskill

Works beautifully! Broken img apparently have :after, while working images don't. I can't find a similar selector for Chrome =( – Mcintire

@Danield, good question, which has an odd answer; I’ve expanded my answer. – Shrewd

+1 I just verified that this works in Firefox. Thanks. – Driskill

Answer 2

For this, you should use the alt attribute, wich shows up if link is broken and you can as well style background of image : example:

img {
  display:inline-block;
  vertical-align:top;
  min-height:50px;
  min-width:300px;
  line-height:50px;
  text-align:center;
  background:
    linear-gradient(to bottom,
      blue,
      orange,
      green);
  font-size:2em;
  box-shadow:inset 0 0 0 3px;
}

These style will be hidden when image is shown. http://codepen.io/anon/pen/Kxipq As you can see, we do not check for broken links, but offer alternative , usefull for blind people , searchengines, whatever , and some extra styles finishes it :)

some extra What is the purpose of the alt attribute for an image?

Unapproachable

The display, min-height and min-width will definitely affect the working image too. – Mcintire

this is a tip, its always a good practice to use width and height attributes in <img> tags , so i presume that size of image you link is known – Unapproachable

Right, but if I style my image to have a pretty alt, I might also style it (unintentionally) for when it does work (which is naturally the assumption). Width, height, border, background, outline etc are very useful for broken images, but will affect working images too. That's why I need a more specific selector. – Mcintire

do not mistake, alt is shown when image is not avalaible, and is not suppose to be a tooltip, this was an error of old IEs to show alt on hover. beside img do not take pseudo-element. please, analyse code and notice theres no border, break the other link too :), drop the min-size if you wish ... understand the purposeand use of ALT attribute. – Unapproachable

+1 This is a fine solution (One observation though, the alt text doesn't obey text-align:center) – Driskill

I have no control over the alt attribute, or any attribute of the img, or any HTML around it. Let's say I want to completely hide broken images. Only possible in Firefox apparently. – Mcintire

each browser has its limits and it change from update to update. alternatve styling can only be sober , sorry for my awfull example :) – Unapproachable

@rudie, okay i understand better (max-size works) to totally hide lternative text, font-size:0; or for IE font-size0.1px should meet your need ? – Unapproachable

I don't want to hide the text =) I want to hide the whole thing. If an img has a height and width, those are probably respected even if broken, so I really do need a specific selector. I'm glad you're so passionate about the alt attribute though =) – Mcintire

I did not totally get your point, (pseudo + max-heigh/width) without any live example ... so we are back to the beginning, there's actually no CSS mechanism for your actual need :) i was on the accessibility side – Unapproachable

Answer 3

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

from: https://www.geeksforgeeks.org/how-to-hide-image-not-found-icon-when-source-image-is-not-found/

Unpolitic

Not quite CSS, but that would work in an html preprocessor. – Mcintire

Answer 4

NO there is no :error pseudo class. This is a good site for a comprehensive list of what is available:

http://reference.sitepoint.com/css/css3psuedoclasses

July, 2015 EDIT/ADDITION:
(Thank you Rudie)

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

Align

Handy list, but incomplete. (They all are.) I like :indeterminate and love :default. – Mcintire

comprehensive ≠ complete. ... and it is 18 months old... ancient in web time. Feel free to update link if you find it is out of date. – Align

Haha so pro! 2015 yo. Thanks man. What about this reference? developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes – Mcintire

Added... via copy paste ;-) – Align

Answer 5

This is close:

<style>
    img[data-broken="true"] {
        visibility: hidden;
    }
</style>

<img src="none.webp" onerror="this.setAttribute('data-broken', 'true')">

Strictly speaking, it sill uses JavaScript. But the JS is self contained in the image HTML code.

Vadose

Answer 6

No. There is nothing in CSS selectors level 2.1 or level 3 that allows targeting an image like that.

Coastwise

it's pointless some how, there no need of this, the alt attribute itself is there for this purpose and style sheet can style it (bag, font-size, and so on ) – Unapproachable

@GCyrillus What if I want to style a border, a margin, a width, etc? Those will affect both broken and working images. It's definitely not the same. Styling alt is cool, but not nearly enough. – Mcintire

@Mcintire , can you test this codepen.io/gc-nomade/pen/gpQWNM and tell me if that is close to your question ? – Unapproachable

I'm not sure what I'm supposed to see =) Both images have padding and margin. The broken image is clearly broken, with alt and red cross (and still Chrome's broken image icon lol). I only want the working image to have padding and margin and box shadow. screencast.com/t/SfFXf79o9e – Mcintire