CODEWITHSUNDEEP
javascriptcssimage
Ford
Ford

Reputation: 2597

Is there anyway to show the broken image (link) icon using CSS/JS?

I want to display the broken image (link) icon for certain objects on a page. I assumed since most browsers have their own way of showing that a link is broken, that it might be something native that can be called? Is there anyway to force it to display using JS/CSS?

Reference: http://sitesbyjoe.com/posts/detail/2012/03/15/make-firefox-show-broken-images

Clarification: I know I can just overlay the div with a tag with broken src, but I'm looking for a CSS/JS solution.

Sample:

<div id="someid" style="background-image:url('someurlthatdoesntexist')"
</div>

Upvotes: 0

Views: 483

Answers (2)

Paul S.
Paul S.

Reputation: 66404

Save yourself a GET by using a dataURI

JavaScript;

var img = new Image(); // or document.createElement('img');
img.src = 'data:image/jpg,'; // data URI that will produce error
document.body.appendChild(img); // and append, for example

HTML;

<img src="data:image/jpg," />

Upvotes: 6

raam86
raam86

Reputation: 6871

PLAIN HTML 

  <img src="idontexist.jpg"/>

Upvotes: 5

Related Questions