Though I think it's not possible, it's always awesome to know what the SO Gurus would act if they were me. So, here's my question:
Is there any way to render a default image in an HTML <img> tag, in case the src attibute is invalid (using only HTML)? If not, what would be your lightweight way to work around it?
<style type="text/css">
img {
background-image: url('/images/default.png')
}
</style>
You asked for an HTML only solution...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Object Test</title>
</head>
<body>
<object data="http://stackoverflow.com/does-not-exist.png">
<img src="http://stackoverflow.com/content/img/so/logo.png">
</object>
</body>
</html>
Since the first image doesn't exist, the fallback (the Stack Overflow logo) will display. And if you're using a really old browser that doesn't support object, it will just ignore that tag and use the img tag.
Using Jquery you could do something like this:
$(document).ready(function() {
if ($("img").attr("src") != null)
{
if ($("img").attr("src").toString() == "")
{
$("img").attr("src", "images/default.jpg");
}
}
else
{
$("img").attr("src", "images/default.jpg");
}
});
This works well for me. Maybe you wanna use JQuery to hook the event.
<img src="foo.jpg" onerror="this.src='error.jpg';">
I don't think it is possible using just HTML. However using javascript this should be doable. Bassicly we loop over each image, test if it is complete and if it's naturalWidth is zero then that means that it not found. Here is the code:
fixBrokenImages = function( url ){
var img = document.getElementsByTagName('img');
var i=0, l=img.length;
for(;i<l;i++){
var t = img[i];
if(t.naturalWidth === 0){
//this image is broken
t.src = url;
}
}
}
Use it like this:
window.onload = function() {
fixBrokenImages('example.com/image.png');
}
Tested in Chrome and Firefox