Entrer une image par défaut dans le cas où l'attribut src d'un html n'est pas valide?

ça me va bien. Peut-être que tu veux utiliser JQuery pour accrocher l'événement.

 <img src="foo.jpg" onerror="if (this.src != 'error.jpg') this.src = 'error.jpg';">

mis à Jour avec jacquargs erreur de garde

mise à Jour: CSS seule solution J'ai vu récemment Vitaly Friedman Démo une grande solution CSS dont je n'étais pas au courant. L'idée est d'appliquer la propriété content à l'image brisée. Normalement :after ou :before ne s'appliquent pas aux images, mais quand ils sont cassées, elles sont appliquées.

<img src="nothere.jpg">
<style>
img:before {
    content: ' ';
    display: block;
    position: absolute;
    height: 50px;
    width: 50px;
    background-image: url(ishere.jpg);
</style>

Démo: https://jsfiddle.net/uz2gmh2k/2 /

comme le montre le violon, l'image brisée elle-même n'est pas enlevée, mais cela résoudra probablement le problème dans la plupart des cas sans JS ni gobs de CSS. Si vous avez besoin d'appliquer des images différentes dans des endroits différents, il suffit de différencier avec une classe: .my-special-case img:before { ...

a Trouvé cette solution au Printemps en Action, 3ème Ed.

<img src="../resources/images/Image1.jpg" onerror="this.src='../resources/images/none.jpg'" />

mise à Jour: Ce N'est pas une solution HTML uniquement... onerror est javascript

<style type="text/css">
img {
   background-image: url('/images/default.png')
}
</style>

assurez-vous d'entrer les dimensions de l'image et si vous voulez que l'image de la tuile ou pas.

Je ne pense pas que ce soit possible en utilisant seulement HTML. Cependant, en utilisant javascript, cela devrait être faisable. Bassicly nous boucle sur chaque image, test si elle est complète et si elle est naturalWidth est zéro, alors cela signifie qu'il n'a 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é dans Chrome et Firefox

si vous utilisez Angular/jQuery, alors cela pourrait vous aider...

<img ng-src="{{item.url}}" altSrc="{{item.alt_url}}" onerror="this.src = $(this).attr('altSrc')">

explication

en supposant que item a une propriété url qui pourrait être nulle, quand elle est, alors l'image apparaîtra comme brisée. Qui déclenche l'exécution de l'expression d'attribut onerror , comme décrit ci-dessus. Vous devez outrepasser l'attribut src comme décrit ci-dessus, mais vous aurez besoin jQuery pour accéder à votre altSrc. Je n'ai pas pu le faire fonctionner avec du JavaScript vanille.

Peut sembler un peu hacky mais sauvé la journée sur mon projet.

<img style="background-image: url(image1), url(image2);"></img>                                            

utilisez l'image de fond qui vous permet d'ajouter plusieurs images. Mon cas: image1 est l'image principale, celle-ci va sortir d'un endroit quelconque (navigateur faisant une requête) image2 est une image locale par défaut à afficher lors du chargement d'image1. Si image1 retourne un type d'erreur, l'utilisateur ne verra pas de changement et ce sera propre pour l'expérience utilisateur

une solution HTML uniquement, où la seule exigence est que vous connaissez la taille de l'image que vous insérez. Ne fonctionnera pas pour les images transparentes, car il utilise background-image comme un remplissage.

nous pouvons utiliser avec succès background-image pour lier l'image qui apparaît si l'image donnée est manquante. Alors le seul problème est l'image de l'icône cassée - nous pouvons la supprimer en insérant un très grand caractère vide, poussant ainsi le contenu à l'extérieur l'affichage de img .

img {
  background-image: url("http://placehold.it/200x200");
  overflow: hidden;
}

img:before {
  content: " ";
  font-size: 1000px;
}

This image is missing:
<img src="a.jpg" style="width: 200px; height: 200px"/><br/>
And is displaying the placeholder

Un CSS seule solution (Webkit)

img:before {
  content: " ";
  background-image: url("http://placehold.it/200x200");
  display: block;
  width: 200px;
  height: 200px;
  position: relative;
  z-index: 0;
}

This image is there:
<img src="http://placehold.it/100x100"/><br/>

This image is missing:
<img src="a.jpg"/><br/>
And is displaying the placeholder

ou, sur jsfiddle: https://jsfiddle.net/xehndm3u/9 /

il n'y a aucun moyen d'être sûr de la myriade de clients (navigateurs) qui vont essayer de voir votre page. Un aspect à considérer est que les clients de courrier électronique sont de facto des navigateurs web et peuvent ne pas gérer un tel trickamajickery ...

en tant que tel, vous devez également inclure un alt/texte avec une largeur et une hauteur par défaut, comme ceci. C'est une solution purement HTML.

alt="NO IMAGE" width="800" height="350"

de sorte que l'autre bonne réponse serait légèrement modifiée comme suit:

<img src="foo.jpg" onerror="if (this.src != 'error.jpg') this.src = 'error.jpg';" alt="NO IMAGE" width="800" height="350">

j'ai eu des problèmes avec la balise object dans Chrome, mais j'imagine que cela s'appliquerait.

vous pouvez plus de style l'alt/texte pour être très grand ...

donc ma réponse est D'utiliser Javascript avec un bon alt/texte de repli.

j'ai aussi trouvé cela intéressant: comment styliser l'attribut alt d'une image

angular2:

<img src="{{foo.url}}" onerror="this.src='path/to/altimg.png'">

un simple img-element n'est pas très flexible donc je l'ai combiné avec un picture-element. de cette façon, aucun CSS n'est nécessaire. quand une erreur se produit, tous les srcset sont définis à la version de repli. une image brisée du lien ne s'affiche pas. il ne charge pas les versions d'image inutiles. l'élément picture prend en charge la conception réactive et de multiples retombées pour les types qui ne sont pas pris en charge par le navigateur.

<picture>
    <source id="s1" srcset="image1_not_supported_by_browser.webp" type="image/webp">
    <source id="s2" srcset="image2_broken_link.png" type="image/png">
    <img src="image3_fallback.jpg" alt="" onerror="this.onerror=null;document.getElementById('s1').srcset=document.getElementById('s2').srcset=this.src;">
</picture>

la solution ci-dessus est incomplète , il a manqué l'attribut src .

this.src et this.attribute('src') ne sont PAS les mêmes, le premier contient la référence complète de l'image, par exemple http://my.host/error.jpg , mais l'attribut ne cesse de la valeur d'origine, error.jpg

solution correcte

<img src="foo.jpg" onerror="if (this.src != 'error.jpg' && this.attribute('src') != 'error.jpg') this.src = 'error.jpg';" />

une version modulable avec JQuery , ajoutez ceci à la fin de votre fichier:

<script>
    $(function() {
        $('img[data-src-error]').error(function() {
            var o = $(this);
            var errorSrc = o.attr('data-src-error');

            if (o.attr('src') != errorSrc) {
                o.attr('src', errorSrc);
            }
        });
    });
</script>

et sur votre étiquette img :

<img src="..." data-src-error="..." />

si vous utilisez Angular 1.x vous pouvez inclure une directive qui vous permettra de revenir à n'importe quel nombre d'images. L'attribut fallback supporte une url unique, plusieurs URL à l'intérieur d'un tableau, ou une expression angulaire en utilisant des données scope:

<img ng-src="myFirstImage.png" fallback="'fallback1.png'" />
<img ng-src="myFirstImage.png" fallback="['fallback1.png', 'fallback2.png']" />
<img ng-src="myFirstImage.png" fallback="myData.arrayOfImagesToFallbackTo" />

ajouter une nouvelle directive de repli à votre module d'application angulaire:

angular.module('app.services', [])
    .directive('fallback', ['$parse', function ($parse) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                var errorCount = 0;

                // Hook the image element error event
                angular.element(element).bind('error', function (err) {
                    var expressionFunc = $parse(attrs.fallback),
                        expressionResult,
                        imageUrl;

                    expressionResult = expressionFunc(scope);

                    if (typeof expressionResult === 'string') {
                        // The expression result is a string, use it as a url
                        imageUrl = expressionResult;
                    } else if (typeof expressionResult === 'object' && expressionResult instanceof Array) {
                        // The expression result is an array, grab an item from the array
                        // and use that as the image url
                        imageUrl = expressionResult[errorCount];
                    }

                    // Increment the error count so we can keep track
                    // of how many images we have tried
                    errorCount++;
                    angular.element(element).attr('src', imageUrl);
                });
            }
        };
    }])

en utilisant Jquery vous pourriez faire quelque chose comme ceci:

$(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");
    }
});

pour toute image, il suffit d'utiliser ce code javascript:

if (ptImage.naturalWidth == 0)
    ptImage.src = '../../../../icons/blank.png';

où ptImage est une adresse d'étiquette <img> obtenue par document.getElementById() .

Google a jeté cette page sur les mots-clés "image fallback html", mais parce que non de la ci-dessus m'a aidé, et je cherchais un "svg fallback support for IE below 9", j'ai continué à chercher et c'est ce que j'ai trouvé:

<img src="base-image.svg" alt="picture" />
<!--[if (lte IE 8)|(!IE)]><image src="fallback-image.png" alt="picture" /><![endif]-->

il se peut que ce soit hors sujet, mais il a résolu mon propre problème et il pourrait aider quelqu'un d'autre aussi.

En plus de Patrick brillante réponse, pour ceux d'entre vous qui sont à la recherche d'une croix-plate-forme angulaire js solution, ici, vous allez:

<object type="image/png" data-ng-attr-data="{{ url || 'data:' }}">
    <!-- any html as a fallback -->
</object>

voici un morceau où je jouais en essayant de trouver la bonne solution: http://plnkr.co/edit/nL6FQ6kMK33NJeW8DVDY?p=preview

bien!! J'ai trouvé cette façon commode , vérifier l'attribut hauteur de l'image à 0, puis vous pouvez remplacer l'attribut src avec l'image par défaut: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image

 image.setAttribute('src','../icons/<some_image>.png');
  //check the height attribute.. if image is available then by default it will 
  //be 100 else 0
  if(image.height == 0){                                       
       image.setAttribute('src','../icons/default.png');
  }