HTML : images dont le lien n’existe plus, alternative à l’icône de broken link

Si une balise image pointe vers un lien mort, on verra apparaître l’icône de lien mort qui n’est pas très esthétique.

<img id="monimage"
src="http://adam.cherti.name/broken/imagelink.jpg"
alt="" />

Résultat :

La plupart des fois, il vaut mieux afficher une image de fallback (une image par défaut) ou bien carrément désactiver l’affichage de l’image

Trois méthodes pour ne plus voir cette icône OU afficher une icône par défaut

Javascript, directement dans le code de l’image :

/* Cacher l'image */
<img id="monimage"
onerror="this.style.display = 'none'"
src="http://adam.cherti.name/broken/imagelink.jpg"
alt="" />

/* Afficher une icône par défaut */
<img id="monimage"
onerror="this.src = 'fallback-img.gif'"
src="http://adam.cherti.name/broken/imagelink.jpg"
alt="" />
Javascript (sans jQuery) :
document.getElementById("#monimage").onerror =
    function() {
        /* Cacher l'image */
        this.style.display =none;
        /* Afficher l'image par défaut */
        this.src = 'fallback-img.gif';
    }
Avec jQuery :
/* Pour une image précise */
$("#monimage").error(
    function() {
        /* Cacher */
        $(this).hide();
        /* Image par défaut */
        $(this).attr('src', 'fallback-img.gif');
    });

/* Pour toutes les images de la page */
$("img").error(
    function() {
        $(this).hide();
    });

Bonus : Un plugin jquery à inclure dans votre page pour automatiser cela à toutes les images :

imgSafe.jquery.js (script du plugin à inclure dans le header ou après le body)

/**
 * imgSafe 0.1 jquery plugin : hide broken images or
 *  show a default fallback image
 * @file imgSafe.jquery.js
 * @author adimux <adam@cherti.name>
 * @license MIT
 * 
*/

jQuery.extend({
    imgSafe: function(def_img) {
         $(document).ready(function() {
             $("img").imgSafe({default:def_img});
         });
    }
});

$.fn.imgSafe = function(params) {
     var default_image_url = null;
     if(typeof params.default != "undefined") {
         default_image_url = params.default;
     }
     this.on("error", function() {
               if(default_image_url == null) {
                    $(this).hide();
               } else {
                    $(this).attr("src", default_image_url);
               }
          });
     return this;
}

Utilisation :

<body>
...
</body>
/* Inclusion de jQuery */
<script src="jquery.min.js" />
/* Inclusion de imgSafe */
<script src="imgSafe.jquery.js" />

<script>
/* Application globale à toutes les images */

/* Cacher toutes les images dont le lien est mort */
$.imgSafe();
/* OU afficher une image par défaut */
$.imgSafe({default:"http://site.com/default-image.gif"});


/* Application à quelques images seulement */

/* Cacher toutes les images dont un lien mort */
$(".imagesSpeciales").imgSafe();
/* OU afficher une image par défaut */
$(".imagesSpeciales").imgSafe({default:"http://site.com/default-image.gif");
</script>

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *