CODEWITHSUNDEEP
cssimagebroken-image
Rudie
Rudie

Reputation: 53890

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

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.)

Upvotes: 9

Views: 6144

Answers (6)

G-Cyrillus
G-Cyrillus

Reputation: 106078

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?

Upvotes: 7

James Risner
James Risner

Reputation: 6011

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.

Upvotes: 1

AndreyChursin
AndreyChursin

Reputation: 111

<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/

Upvotes: 6

Phlume
Phlume

Reputation: 3131

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

Upvotes: 1

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201896

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).

Upvotes: 14

Jon
Jon

Reputation: 437914

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

Upvotes: 0

Related Questions