Est-il possible de restituer une image par défaut dans une balise HTML <img> , dans le cas où l'attribut src n'est pas valide (en utilisant uniquement du code HTML)? Sinon, quelle serait votre façon légère de contourner le problème?
Réponses
Trop de publicités?
Vous avez demandé une solution uniquement HTML ...
<!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" type="image/png">
<img src="http://stackoverflow.com/content/img/so/logo.png" />
</object>
</body>
</html>
Comme la première image n’existe pas, le repli (logo Stack Overflow) s’affiche. Et si vous utilisez un très vieux navigateur qui ne prend pas en charge object , il ignorera simplement cette balise et utilisera la balise img .
Svend
Points
3291
amit bakle
Points
331
lambacck
Points
4955
Pim Jager
Points
20018
Je ne pense pas qu'il soit possible d'utiliser uniquement du code HTML. Cependant, l'utilisation de javascript devrait être faisable. Bassicly on boucle sur chaque image, teste si elle est complète et si c'est naturelWidth est zéro alors cela signifie qu'il n'est pas trouvé. Voici le 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;
}
}
}
Utilisez-le comme ceci:
window.onload = function() {
fixBrokenImages('example.com/image.png');
}
Testé sous Chrome et Firefox
