8

Possible Duplicate:
jQuery/Javascript to replace broken images

This should be easy I just don't know the terminology to be googling for. I think this is HTML/CSS, if an image link is broken it often shows a missing image icon showing a page with red, green, blue shapes. In HTML is it possible to configure "use this image if an image link is broken?"

Community
  • 1
  • 1
djechlin
  • 59,258
  • 35
  • 162
  • 290
  • 1
    Note that, despite jQuery in the title of above link, the answer is purely based on standard Javascript – Icarus Aug 31 '12 at 20:15
  • @Icarus: only the accepted answer. A jQuery answer is available below. – orlp Aug 31 '12 at 20:16
  • Voting to reopen because while the questions are similar, I don't think a question asking for a CSS solution can be a duplicate of a question asking for a JavaScript solution. Even if the only possible solution is to *use* JavaScript regardless. – David Thomas Aug 31 '12 at 20:36
  • Wasn't sure where client side this should be happening but js is a pretty reasonable place it would be handled. This works for me. – djechlin Aug 31 '12 at 20:47
  • [Duplicates should NOT be deleted.](http://meta.stackexchange.com/questions/32311/do-not-delete-duplicates) – djechlin May 13 '13 at 12:04

4 Answers4

13

An 'onerror' example:

<img src="fail.jpg" onerror="this.src='https://www.google.com.br/logos/2012/montessori-res.png';">

http://jsfiddle.net/u4hQd/

petervaz
  • 13,685
  • 1
  • 15
  • 15
1

I think the heart of this is how to add dynamic functionality to CSS. I don't know of an if/else check in CSS apart from detecting browsers, however, this is what I would do if I ever need to do something like this.

If you are using php you can do this:

$imagename = "image.png";
if (file_exists($imagename)){
   echo '<p class="exists">';
} else {
   echo '<p class="dne">';
}

Then in the css you can have 

.exists{background:url("../img/git-sprite.png") no-repeat 0px -32px;}
.dne{background:url("../img/git-sprite2.png") no-repeat 0px -32px;}

This way you can add an if/else functionality for this in the CSS itself. You don't have to use PHP, I'm sure a javascript would work as well

raghav.mohan
  • 9
  • 1
  • 1
0

Are you using php?

You could check before sending the file with something like this:

$filename = "whatever.png";
if (file_exists($filename)){
   $html = "<img src=\"$filename\">";
} else {
   $html = "<img src=\"someotherpath.jpg\">";
}
echo $html;
orlp
  • 112,504
  • 36
  • 218
  • 315
ajon
  • 7,868
  • 11
  • 48
  • 86
  • This is not what's wanted, the OP wants this client side. – orlp Aug 31 '12 at 20:20
  • 1
    Just because it is tagged as html/css doesn't mean that he isn't using php. This is a perfectly valid solution, offering another viewpoint. – ajon Aug 31 '12 at 20:23
  • No it's not, for example he could be writing a userscript or a template. I can't imagine this solution being useful in any situation. – orlp Aug 31 '12 at 20:25
  • fwiw this isn't useful to me personally as yes, we do have a business reason (like, charged per harddrive access) not to do it server-side in this manner. – djechlin Aug 31 '12 at 20:29
  • This is another solution, by the way, @nightcracker, server side validation idea, as proposed by ajon, is way better over client-side. By many reasons. – Dima Aug 31 '12 at 20:29
  • interesting another person posted a nearly identical solution. Maybe you should step out of your box and realize there are inumerable ways to solve problems using an inumerable number of languages. Even if this solution doesn't help this person, it could help someone else viewing the post. Stop abusing the down arrow. – ajon Aug 31 '12 at 20:29
0

Your question is understandable without any additional terminology. Unfortunately there are no means in HTML for what you want.

What you can do is use JS (jQuery will help), to cycle through all img tags in your document, and check which of them have images (check against null). For those, who miss their images, you can load some other image (some default).

But remember to run this script after the page has completely loaded (with all assets: JS, CSS, images), because if you run it before page loading is done, you may mistakenly put default image to some img tag, which had no time to load it's real image.

Dima
  • 1,717
  • 15
  • 34
  • 1
    The proposed solution is bad, the event `"onerror"` was specifically made for this problem. – orlp Aug 31 '12 at 20:20
  • @nightcracker, I did not say his terminology was unclear, but since he mentioned, he "just don't know the terminology", I wrote it is understandable without any additional terms. – Dima Aug 31 '12 at 20:23
  • Sorry I misread, which is why I edited it out :) – orlp Aug 31 '12 at 20:24
  • So, please, read the posts next time before being rude. – Dima Aug 31 '12 at 20:27