0

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>
Improve this question
8
  • 1
    Why would have broken images or link in first place. Is it not better to fix that rather than finding mechanism to cover up the broken stuff? Commented Jun 14, 2013 at 21:02
  • onerror attribute of the img tag can help you set custom image, and that will be uniform across browsers. Commented Jun 14, 2013 at 21:03
  • 1
    @Learner He's not trying to cover up broken stuff. He wants to make something normal look like it's a broken link. Not sure why. Commented Jun 14, 2013 at 21:06
  • Aah, I see. But strange requirement. Commented Jun 14, 2013 at 21:08
  • 1
    Doesn't alt tag help you? alt="Your broken text message"? Commented Jun 14, 2013 at 21:11

2 Answers 2

Reset to default
6

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," />
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I do like the data URI use!
5

PLAIN HTML 

  <img src="idontexist.jpg"/>
Improve this answer

5 Comments

I know it can be down in HTML like that, but I wanted a CSS/JS solution to do it dynamically instead of adding new elements to my DOM.
How will you display it without adding elements?
This is what I was originally looking at: sitesbyjoe.com/posts/detail/2012/03/15/…
Notice your link only displays the icon if the document already has an IMG element which is broken.
It was just an example. I wanted to know if there is a CSS/JS way to display the browser's default broken image icon at my discretion. At any rate, I'll leave this question open for a bit more, and if I get no response I'll mark yours at the accepted.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.