Ich habe eine Webseite, die eine Reihe von Bildern enthält. Manchmal ist das Bild nicht verfügbar, sodass ein fehlerhaftes Bild im Browser des Clients angezeigt wird.

Wie verwende ich jQuery, um den Satz von Bildern abzurufen, ihn nach fehlerhaften Bildern zu filtern und dann den src zu ersetzen?

- Ich dachte, es wäre einfacher, dies mit jQuery zu tun, aber es stellte sich als viel einfacher heraus, nur eine reine JavaScript-Lösung zu verwenden, dh die von Prestaul bereitgestellte.

Behandeln Sie das onErrorEreignis, damit das Bild seine Quelle mithilfe von JavaScript neu zuweist:

function imgError(image) {
    image.onerror = "";
    image.src = "/images/noimage.gif";
    return true;
}

<img src="image.png" onerror="imgError(this);"/>

Oder ohne JavaScript-Funktion:

<img src="image.png" onError="this.onerror=null;this.src='/images/noimage.gif';" />

In der folgenden Kompatibilitätstabelle sind die Browser aufgeführt, die die Fehlerfunktion unterstützen:

http://www.quirksmode.org/dom/events/error.html

Ich benutze den eingebauten errorHandler:

$("img").error(function () {
    $(this).unbind("error").attr("src", "broken.gif");
});

Bearbeiten: Die error()Methode ist in Abfrage 1.8 und höher veraltet . Verwenden Sie .on("error")stattdessen Folgendes:

$("img").on("error", function () {
    $(this).attr("src", "broken.gif");
});

Falls jemand wie ich versucht, das errorEreignis an ein dynamisches HTML- imgTag anzuhängen , möchte ich darauf hinweisen, dass es einen Haken gibt:

Anscheinend sprudelnimg Fehlerereignisse in den meisten Browsern nicht, was im Standard angegeben ist .

So etwas wie das Folgende wird nicht funktionieren :

$(document).on('error', 'img', function () { ... })

Hoffe, dass dies jemand anderem hilfreich sein wird. Ich wünschte, ich hätte das hier in diesem Thread gesehen. Aber ich habe es nicht getan. Also füge ich es hinzu

Hier ist eine eigenständige Lösung:

$(window).load(function() {
  $('img').each(function() {
    if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
      // image was broken, replace with your new image
      this.src = 'http://www.tranism.com/weblog/images/broken_ipod.gif';
    }
  });
});

Ich glaube, das ist es, wonach Sie suchen : jQuery.Preload

Hier ist der Beispielcode aus der Demo. Sie geben das Laden und die nicht gefundenen Bilder an und schon sind Sie fertig:

$('#images img').preload({
    placeholder:'placeholder.jpg',
    notFound:'notfound.jpg'
});

$(window).bind('load', function() {
$('img').each(function() {
    if((typeof this.naturalWidth != "undefined" &&
        this.naturalWidth == 0 ) 
        || this.readyState == 'uninitialized' ) {
        $(this).attr('src', 'missing.jpg');
    }
}); })

Quelle: http://www.developria.com/2009/03/jquery-quickie---broken-images.html

Während das OP versuchte, das SRC zu ersetzen, möchten sicher viele Leute, die diese Frage beantworten, nur das kaputte Bild verbergen. In diesem Fall hat diese einfache Lösung für mich großartig funktioniert.

Verwenden von Inline-JavaScript:

<img src="img.jpg" onerror="this.style.display='none';" />

Verwenden von externem JavaScript:

var images = document.querySelectorAll('img');

for (var i = 0; i < images.length; i++) {
  images[i].onerror = function() {
    this.style.display='none';
  }
}

<img src='img.jpg' />

Verwenden von modernem externem JavaScript:

document.querySelectorAll('img').forEach((img) => {
  img.onerror = function() {
    this.style.display = 'none';
  }
});

<img src='img.jpg' />

Siehe Browser - Unterstützung für NoteList.forEach und Pfeil - Funktionen .

Hier ist eine schnelle und schmutzige Möglichkeit, alle fehlerhaften Bilder zu ersetzen, und es ist nicht erforderlich, den HTML-Code zu ändern;)

Codepen Beispiel

    $("img").each(function(){
        var img = $(this);
        var image = new Image();
        image.src = $(img).attr("src");
        var no_image = "https://dummyimage.com/100x100/7080b5/000000&text=No+image";
        if (image.naturalWidth == 0 || image.readyState == 'uninitialized'){
            $(img).unbind("error").attr("src", no_image).css({
                height: $(img).css("height"),
                width: $(img).css("width"),
            });
        }
  });

Ich konnte kein Skript finden, das meinen Anforderungen entspricht, daher habe ich eine rekursive Funktion erstellt, um nach fehlerhaften Bildern zu suchen und sie alle vier Sekunden neu zu laden, bis sie behoben sind.

Ich habe es auf 10 Versuche beschränkt, als ob es bis dahin nicht geladen wäre. Das Image ist möglicherweise nicht auf dem Server vorhanden und die Funktion würde in eine Endlosschleife eintreten. Ich teste immer noch. Fühlen Sie sich frei, es zu optimieren :)

var retries = 0;
$.imgReload = function() {
    var loaded = 1;

    $("img").each(function() {
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {

            var src = $(this).attr("src");
            var date = new Date();
            $(this).attr("src", src + "?v=" + date.getTime()); //slightly change url to prevent loading from cache
            loaded =0;
        }
    });

    retries +=1;
    if (retries < 10) { // If after 10 retries error images are not fixed maybe because they
                        // are not present on server, the recursion will break the loop
        if (loaded == 0) {
            setTimeout('$.imgReload()',4000); // I think 4 seconds is enough to load a small image (<50k) from a slow server
        }
        // All images have been loaded
        else {
            // alert("images loaded");
        }
    }
    // If error images cannot be loaded  after 10 retries
    else {
        // alert("recursion exceeded");
    }
}

jQuery(document).ready(function() {
    setTimeout('$.imgReload()',5000);
});

Dies ist eine beschissene Technik, aber sie ist ziemlich garantiert:

<img ...  onerror="this.parentNode.removeChild(this);">

Sie können dafür GitHubs eigenen Abruf verwenden:

Frontend: https://github.com/github/fetch
oder für Backend eine Node.js-Version: https://github.com/bitinn/node-fetch

fetch(url)
  .then(function(res) {
    if (res.status == '200') {
      return image;
    } else {
      return placeholder;
    }
  }

Bearbeiten: Diese Methode wird XHR ersetzen und war angeblich bereits in Chrome. Für jeden, der dies in Zukunft liest, ist die oben genannte Bibliothek möglicherweise nicht enthalten.

Dies ist JavaScript, sollte browserübergreifend kompatibel sein und ohne das hässliche Markup geliefert werden onerror="":

var sPathToDefaultImg = 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
    validateImage = function( domImg ) {
        oImg = new Image();
        oImg.onerror = function() {
            domImg.src = sPathToDefaultImg;
        };
        oImg.src = domImg.src;
    },
    aImg = document.getElementsByTagName( 'IMG' ),
    i = aImg.length;

while ( i-- ) {
    validateImage( aImg[i] );
}

CODEPEN:

Besser anrufen mit

jQuery(window).load(function(){
    $.imgReload();
});

Da die Verwendung document.readynicht unbedingt bedeutet, dass Bilder geladen werden, wird nur der HTML-Code geladen. Somit besteht keine Notwendigkeit für einen verzögerten Anruf.

CoffeeScript- Variante:

Ich habe es geschafft, ein Problem mit Turbolinks zu beheben, das dazu führt, dass die .error () -Methode manchmal in Firefox ausgelöst wird, obwohl das Bild wirklich vorhanden ist.

$("img").error ->
  e = $(@).get 0
  $(@).hide() if !$.browser.msie && (typeof this.naturalWidth == "undefined" || this.naturalWidth == 0)

Mit der Antwort von Prestaul habe ich einige Überprüfungen hinzugefügt und bevorzuge die jQuery-Methode.

<img src="image1.png" onerror="imgError(this,1);"/>
<img src="image2.png" onerror="imgError(this,2);"/>

function imgError(image, type) {
    if (typeof jQuery !== 'undefined') {
       var imgWidth=$(image).attr("width");
       var imgHeight=$(image).attr("height");

        // Type 1 puts a placeholder image
        // Type 2 hides img tag
        if (type == 1) {
            if (typeof imgWidth !== 'undefined' && typeof imgHeight !== 'undefined') {
                $(image).attr("src", "http://lorempixel.com/" + imgWidth + "/" + imgHeight + "/");
            } else {
               $(image).attr("src", "http://lorempixel.com/200/200/");
            }
        } else if (type == 2) {
            $(image).hide();
        }
    }
    return true;
}

Wenn Sie Ihr imgmit eingefügt haben , z. B. innerHTML: $("div").innerHTML = <img src="wrong-uri">, Können Sie ein anderes Bild laden, wenn dies fehlschlägt. Beispiel:

<script>
    function imgError(img) {
        img.error="";
        img.src="valid-uri";
    }
</script>

<img src="wrong-uri" onerror="javascript:imgError(this)">

Warum wird javascript: _benötigt? Da Skripte, die über Skript-Tags in das DOM eingefügt innerHTMLwerden, zum Zeitpunkt der Einfügung nicht ausgeführt werden, müssen Sie explizit sein.

Ich habe diesen Beitrag gefunden, als ich mir diesen anderen SO-Beitrag angesehen habe . Unten ist eine Kopie der Antwort, die ich dort gegeben habe.

Ich weiß, dass dies ein alter Thread ist, aber React ist populär geworden, und vielleicht kommt jemand, der React verwendet, hierher, um nach einer Antwort auf dasselbe Problem zu suchen.

Wenn Sie also React verwenden, können Sie Folgendes tun: Dies war eine Antwort, die ursprünglich von Ben Alpert vom React-Team hier bereitgestellt wurde

getInitialState: function(event) {
    return {image: "http://example.com/primary_image.jpg"};
},
handleError: function(event) {
    this.setState({image: "http://example.com/failover_image.jpg"});
},
render: function() {
    return (
        <img onError={this.handleError} src={src} />;
    );
}

Ich habe eine Geige erstellt , um das kaputte Bild durch das Ereignis "onerror" zu ersetzen. Dies kann Ihnen helfen.

    //the placeholder image url
    var defaultUrl = "url('https://sadasd/image02.png')";

    $('div').each(function(index, item) {
      var currentUrl = $(item).css("background-image").replace(/^url\(['"](.+)['"]\)/, '$1');
      $('<img>', {
        src: currentUrl
      }).on("error", function(e) {
        $this = $(this);
        $this.css({
          "background-image": defaultUrl
        })
        e.target.remove()
      }.bind(this))
    })

Hier ist ein Beispiel für die Verwendung des von JQuery umschlossenen HTML5-Image-Objekts. Rufen Sie die Ladefunktion für die primäre Image-URL auf. Wenn dieses Laden einen Fehler verursacht, ersetzen Sie das src-Attribut des Images durch eine Sicherungs-URL.

function loadImageUseBackupUrlOnError(imgId, primaryUrl, backupUrl) {
    var $img = $('#' + imgId);
    $(new Image()).load().error(function() {
        $img.attr('src', backupUrl);
    }).attr('src', primaryUrl)
}

<img id="myImage" src="primary-image-url"/>
<script>
    loadImageUseBackupUrlOnError('myImage','primary-image-url','backup-image-url');
</script>

Pure JS. Meine Aufgabe war: Wenn das Bild 'bl-Once.png' leer ist -> fügen Sie das erste Bild (das keinen 404-Status hat) aus der Array-Liste ein (im aktuellen Verzeichnis):

<img src="http://localhost:63342/GetImage/bl-once.png" width="200" onerror="replaceEmptyImage.insertImg(this)">

Vielleicht muss es verbessert werden, aber:

var srcToInsertArr = ['empty1.png', 'empty2.png', 'needed.png', 'notActual.png']; // try to insert one by one img from this array
    var path;
    var imgNotFounded = true; // to mark when success

    var replaceEmptyImage = {
        insertImg: function (elem) {

            if (srcToInsertArr.length == 0) { // if there are no more src to try return
                return "no-image.png";
            }
            if(!/undefined/.test(elem.src)) { // remember path
                path = elem.src.split("/").slice(0, -1).join("/"); // "http://localhost:63342/GetImage"
            }
            var url = path + "/" + srcToInsertArr[0];

            srcToInsertArr.splice(0, 1); // tried 1 src

            
                if(imgNotFounded){ // while not success
                    replaceEmptyImage.getImg(url, path, elem); // CALL GET IMAGE
                }
            

        },
        getImg: function (src, path, elem) { // GET IMAGE

            if (src && path && elem) { // src = "http://localhost:63342/GetImage/needed.png"
                
                var pathArr = src.split("/"); // ["http:", "", "localhost:63342", "GetImage", "needed.png"]
                var name = pathArr[pathArr.length - 1]; // "needed.png"

                xhr = new XMLHttpRequest();
                xhr.open('GET', src, true);
                xhr.send();

                xhr.onreadystatechange = function () {

                    if (xhr.status == 200) {
                        elem.src = src; // insert correct src
                        imgNotFounded = false; // mark success
                    }
                    else {
                        console.log(name + " doesn't exist!");
                        elem.onerror();
                    }

                }
            }
        }

    };

Es wird also die korrekte 'required.png' aus dem aktuellen Verzeichnis in meine src oder 'no-image.png' einfügen.

Ich bin mir nicht sicher, ob es einen besseren Weg gibt, aber ich kann mir einen Hack vorstellen, um ihn zu bekommen - Sie könnten Ajax auf die img-URL posten und die Antwort analysieren, um zu sehen, ob das Bild tatsächlich zurückgekommen ist. Wenn es als 404 oder so zurückkam, tauschen Sie das Bild aus. Obwohl ich davon ausgehe, dass dies ziemlich langsam sein wird.

Ich habe mein Problem mit diesen zwei einfachen Funktionen gelöst:

function imgExists(imgPath) {
    var http = jQuery.ajax({
                   type:"HEAD",
                   url: imgPath,
                   async: false
               });
    return http.status != 404;
}

function handleImageError() {
    var imgPath;

    $('img').each(function() {
        imgPath = $(this).attr('src');
        if (!imgExists(imgPath)) {
            $(this).attr('src', 'images/noimage.jpg');
        }
    });
}

jQuery 1.8

// If missing.png is missing, it is replaced by replacement.png
$( "img" )
  .error(function() {
    $( this ).attr( "src", "replacement.png" );
  })
  .attr( "src", "missing.png" );

jQuery 3

// If missing.png is missing, it is replaced by replacement.png
$( "img" )
  .on("error", function() {
    $( this ).attr( "src", "replacement.png" );
  })
  .attr( "src", "missing.png" );

Referenz

Ich denke, ich habe eine elegantere Möglichkeit, Ereignisse zu delegieren und Ereignisse zu erfassen window, errorselbst wenn das Backup-Image nicht geladen werden kann.

img {
  width: 100px;
  height: 100px;
}

<script>
  window.addEventListener('error', windowErrorCb, {
    capture: true
  }, true)

  function windowErrorCb(event) {
    let target = event.target
    let isImg = target.tagName.toLowerCase() === 'img'
    if (isImg) {
      imgErrorCb()
      return
    }

    function imgErrorCb() {
      let isImgErrorHandled = target.hasAttribute('data-src-error')
      if (!isImgErrorHandled) {
        target.setAttribute('data-src-error', 'handled')
        target.src = 'backup.png'
      } else {
        //anything you want to do
        console.log(target.alt, 'both origin and backup image fail to load!');
      }
    }
  }
</script>
<img id="img" src="error1.png" alt="error1">
<img id="img" src="error2.png" alt="error2">
<img id="img" src="https://i.stack.imgur.com/ZXCE2.jpg" alt="avatar">

Der Punkt ist :

1. Fügen Sie den Code in das ein headund führen Sie es als erstes Inline-Skript aus. Es werden also die Fehler abgehört, die nach dem Skript auftreten.

2. Verwenden Sie die Ereigniserfassung, um die Fehler abzufangen, insbesondere bei Ereignissen, die nicht sprudeln.

3. Verwenden Sie die Ereignisdelegierung, um zu vermeiden, dass Ereignisse für jedes Bild gebunden werden.

4. Geben Sie dem Fehlerelement imgein Attribut, nachdem Sie ihm ein Attribut gegeben haben backup.png, um das Verschwinden der backup.pngund der nachfolgenden Endlosschleife wie folgt zu vermeiden :

img error-> backup.png-> error-> backup.png-> error -> ,,,,,

;(window.jQuery || window.Zepto).fn.fallback = function (fallback) {
    return this.one('error', function () {
        var self = this;
        this.src = (fallback || 'http://lorempixel.com/$width/$height')
        .replace(/\$(\w+)/g, function (m, t) { return self[t] || ''; });
    });
};

Sie können einen Platzhalterpfad übergeben und darin auf alle Eigenschaften des fehlgeschlagenen Bildobjekts zugreifen über $*:

$('img').fallback('http://dummyimage.com/$widthx$height&text=$src');

http://jsfiddle.net/ARTsinn/Cu4Zn/

Das hat mich seit Jahren frustriert. Mein CSS-Fix legt ein Hintergrundbild auf dem img. Wenn ein dynamisches Bild srcnicht in den Vordergrund geladen wird, ist ein Platzhalter auf dem imgHintergrund des Bildschirms sichtbar . Dies funktioniert , wenn Sie Ihre Bilder mit einer Standardgröße (zB height, min-height, widthund / oder min-width).

Sie sehen das Symbol für defekte Bilder, aber es ist eine Verbesserung. Bis auf IE9 erfolgreich getestet. iOS Safari und Chrome zeigen nicht einmal ein defektes Symbol.

.dynamicContainer img {
  background: url('/images/placeholder.png');
  background-size: contain;
}

Fügen Sie eine kleine Animation hinzu, um srcZeit zum Laden ohne Hintergrundflimmern zu haben. Chrome wird im Hintergrund reibungslos ausgeblendet, Desktop Safari jedoch nicht.

.dynamicContainer img {
  background: url('/images/placeholder.png');
  background-size: contain;
  -webkit-animation: fadein 1s;
  animation: fadein 1s;                     
}

@-webkit-keyframes fadein {
  0%   { opacity: 0.0; }
  50%  { opacity: 0.5; }
  100% { opacity: 1.0; }
}

@keyframes fadein {
  0%   { opacity: 0.0; }
  50%  { opacity: 0.5; }
  100% { opacity: 1.0; }
}

Wenn das Bild nicht geladen werden kann (z. B. weil es nicht unter der angegebenen URL vorhanden ist), wird die Bild-URL in die Standard-URL geändert.

Weitere Informationen zu .error ()

$('img').on('error', function (e) {
  $(this).attr('src', 'broken.png');
});

Ich habe das gleiche Problem. Dieser Code funktioniert gut in meinem Fall.

// Replace broken images by a default img
$('img').each(function(){
    if($(this).attr('src') === ''){
      this.src = '/default_feature_image.png';
    }
});

Manchmal ist die Verwendung des errorEreignisses nicht möglich, z. B. weil Sie versuchen, etwas auf einer bereits geladenen Seite auszuführen, z. B. wenn Sie Code über die Konsole, ein Lesezeichen oder ein asynchron geladenes Skript ausführen. In diesem Fall scheint es den Trick zu tun , dies zu überprüfen img.naturalWidthund img.naturalHeight0 zu sein.

Hier ist beispielsweise ein Ausschnitt zum erneuten Laden aller fehlerhaften Bilder von der Konsole:

$$("img").forEach(img => {
  if (!img.naturalWidth && !img.naturalHeight) {
    img.src = img.src;
  }
}

Ich fand, dass dies am besten funktioniert. Wenn ein Bild beim ersten Laden nicht geladen werden kann, wird es vollständig aus dem DOM entfernt. Durch Ausführen wird console.clear()das Konsolenfenster sauber gehalten, da die 404-Fehler bei Try / Catch-Blöcken nicht ausgelassen werden können.

$('img').one('error', function(err) {
    // console.log(JSON.stringify(err, null, 4))
    $(this).remove()
    console.clear()
})