How to hide image broken Icon using only CSS/HTML?

html

responsive-design

best-practices

css

byAlex Kataev·Dec 28, 2024

Nullify the broken image icon in HTML by adjusting an img element’s display to none when its source is unavailable. Here's the salient CSS recipe:

img {
  display: none;
}
img[src^="data:image"],
img:not([src^="http"]) {
  display: inline;
}

This insulation mechanism ensures images are visible only when properly loaded. In case of failure, they're hidden, thereby preventing unsightly corrupted icons.

Eliminating the void through CSS

Instead of leaving empty spaces where images failed to load, we can implement an elegant placeholder using CSS to maintain layout integrity:

img[src=""],
img:not([src]) {
  display: block;
  background: url('placeholder.png') no-repeat center center;
  width: 100px;  /* specify width as per requirement */
  height: 100px; /* specify height as per requirement */
}
/* "Why not Zoidberg?" as it injects a placeholder image */

The `object`é d'art solution

If you're fond of graceful degradation, consider using the <object> tag as the container for your images:

<object data="image.jpg" type="image/png">
  <img src="fallback.jpg" alt="alternative text">
</object>
/* Sure, Picasso messed up, but at least we got a fallback image */

This falls back to an embedded object such as a fallback image or, in its absence, disintegrates gracefully without rendering anything.

More power to you with `onerror`

While the pure CSS solutions are appealing, if you’re open to injecting a touch of JavaScript, an onerror attribute can offer even greater control:

<img src="image.jpg" onerror="this.style.display='none'"/>
/* On failure, we whip out our magic wand: "Expelliarmus error icon!" */

With this, JavaScript only springs into action when an error happens, thus preventing any unnecessary changes to your initial CSS.

Using CSS to play hide and seek

Here's our geeky prank. With the text-indent property, we shove the broken image icon offscreen:

img {
  text-indent: -9999px;
  display: block; /* avoid collapsing */
}
/* Admire the magic trick? Now you see it, now you don't! */

Each image saved from displaying a broken icon contributes to a cleaner, professional design.

Serving aesthetics with pseudo-elements

The ::after pseudo-element is your ally in this mission. It covers up the broken image, leaving no evidence behind:

img::after {
  content: " ";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: #f0f0f0; /* give it your favorite color */
}
/* It's like a CSI cleanup operation but for broken image icons! */

Ensuring safe display with CSS

Lastly, let's ensure the safety of your object tag usage by verifying the sources:

object[data^="http"] {
  /* And... we've wrapped it up securely! */
  display: block;
}
object:not([data^="http"]) {
  /* Unverified Source: We don't talk with strangers */
  display: none;
}