jQuery / JavaScript do zastąpienia uszkodzonych obrazów

Używam wbudowanego w error Handlera:

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

error() deprecated in 1.8 albo wyżej.

W przypadku, gdy ktoś taki jak ja próbuje dołączyć Zdarzenie error do dynamicznego znacznika HTML img, chciałbym zwrócić uwagę, że jest haczyk:

Najwyraźniej img zdarzenia błędów don ' t bubble w większości przeglądarek, wbrew temu, co mówi standard .

Więc coś takiego nie zadziała :

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

Oto samodzielne rozwiązanie:

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

Wierzę, że to jest to, czego szukasz: jQuery.Preload

Oto przykładowy kod z demo, określasz ładowanie i nie znaleziono obrazów i wszystko gotowe:

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

Źródło: http://www.developria.com/2009/03/jquery-quickie---broken-images.html

Jest to gówniana technika, ale to prawie gwarantowane:

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

Podczas gdy OP chciał zastąpić SRC, jestem pewien, że wiele osób uderzających w to pytanie może chcieć tylko ukryć uszkodzony obraz, w którym to przypadku to proste rozwiązanie działało dla mnie świetnie:

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

Oto szybki i brudny sposób na zastąpienie wszystkich uszkodzonych obrazów i nie ma potrzeby zmiany kodu HTML;)

Przykład Codepen

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

Nie mogłem znaleźć skryptu odpowiadającego moim potrzebom, więc zrobiłem funkcję rekurencyjną, aby sprawdzać uszkodzone obrazy i próbować przeładowywać je co cztery sekundy, dopóki nie zostaną naprawione.

Ograniczyłem go do 10 prób, jakby nie był załadowany do tego czasu obraz może nie być obecny na serwerze i funkcja wejdzie w nieskończoną pętlę. Wciąż jednak testuję. Zapraszam do podkręcania:)

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);
});

Możesz użyć do tego własnego fetcha Githuba:

Frontend: https://github.com/github/fetch
lub dla zaplecza, węzeł.wersja js: https://github.com/bitinn/node-fetch

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

Edit: ta metoda zastąpi XHR i podobno już była w Chrome. Dla każdego, kto to czyta w przyszłości, możesz nie potrzebować wspomnianej biblioteki.

To jest JavaScript, powinien być kompatybilny z wieloma przeglądarkami i dostarcza bez brzydkich znaczników 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:

Lepsze wywołanie za pomocą

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

Ponieważ użycie document.ready nie oznacza, że obrazy są ładowane, tylko HTML. W związku z tym nie ma potrzeby opóźnionego połączenia.

CoffeeScript variant:

Zrobiłem to, aby naprawić problem z Turbolinkami, który powoduje .metoda error (), aby uzyskać podniesiony w Firefoksie czasami, nawet jeśli obraz jest naprawdę tam.

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

Używając Prestaul ' s answer , dodałem kilka sprawdzeń i wolę używać jQuery.

<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;
}

Jeśli wstawiłeś swój img z innerHTML, np.: $("div").innerHTML = <img src="wrong-uri">, możesz załadować inny obrazek, jeśli się nie powiedzie, np.:

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

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

Dlaczego javascript: _jest potrzebne? Ponieważ skrypty wstrzykiwane do DOM za pomocą znaczników skryptu w innerHTML nie są uruchamiane w momencie ich wstrzykiwania, więc musisz być jawny.

Znalazłem ten post patrząc na ten drugi więc post . Poniżej Kopia odpowiedzi, którą tam udzieliłem.

Wiem, że to stary wątek, ale React stał się popularny i być może ktoś korzystający z Reacta przyjdzie tu szukać odpowiedzi na ten sam problem.

Więc, jeśli używasz Reacta, możesz zrobić coś takiego jak poniżej, co było oryginalną odpowiedzią dostarczoną przez Bena Alperta z zespołu Reacta tutaj

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} />;
    );
}

Utworzyłem fiddle , aby zastąpić uszkodzony obraz za pomocą zdarzenia "onerror". To może Ci pomóc.

    //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))
    })

Oto przykład użycia obiektu obrazu HTML5 zawiniętego przez JQuery. Wywołanie funkcji load dla głównego adresu URL obrazu i jeśli to obciążenie spowoduje błąd, zastąp atrybut src obrazu zapasowym adresem 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>

Czysty JS. Moim zadaniem było: if image ' BL-once.png ' jest pusty - > Wstaw pierwszy (który nie ma statusu 404) obraz z listy array (w bieżącym katalogu):

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

Może Trzeba to poprawić, ale:

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

                }
            }
        }

    };

Więc, będzie wstawić poprawne ' potrzebne.png 'do mojego src lub' No-image.png " z aktualnego reż.

Nie jestem pewien, czy jest lepszy sposób, ale mogę wymyślić hack, aby go dostać - można Ajax post do img URL, i parse odpowiedź, aby zobaczyć, czy obraz rzeczywiście wrócił. Jeśli wróci jako 404 czy coś, to wymień img. Choć spodziewam się, że będzie to dość powolne.

Rozwiązałem swój problem z tymi dwoma prostymi funkcjami:

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" );

Odniesienie

;(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] || ''; });
    });
};

Możesz przekazać ścieżkę zastępczą i uzyskać dostęp do wszystkich właściwości z nieudanego obiektu obrazu poprzez $*:

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

Http://jsfiddle.net/ARTsinn/Cu4Zn/

To frustruje mnie od lat. Moja poprawka CSS ustawia obraz tła na img. Gdy dynamiczny obraz src nie ładuje się na pierwszy plan, na bg img jest widoczny symbol zastępczy. Działa to, jeśli obrazy mają domyślny rozmiar (np. height, min-height, width i / lub min-width).

Zobaczysz uszkodzoną ikonę obrazu, ale jest to poprawa. Testowane do IE9 pomyślnie. iOS Safari i Chrome nawet nie pokazują uszkodzonej ikony.

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

Dodaj trochę animacji, aby dać src Czas ładowania bez migotania tła. Chrome blednie w tle płynnie, ale desktop Safari Nie.

.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; }
}

Jeśli obraz nie może zostać załadowany (na przykład, ponieważ nie jest obecny pod podanym adresem URL), URL obrazka zostanie zmieniony na domyślny,

Więcej o .błąd()

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

Myślę, że mam bardziej elegancki sposób z delegacją zdarzeń i przechwytywaniem zdarzeń na window ' S error, nawet gdy kopia zapasowa obrazu nie ładuje się.

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">

Chodzi o to:

1. Umieść kod w head i wykonaj go jako pierwszy skrypt wbudowany. Tak więc, będzie słuchać błędy się po skrypcie.

2. Użyj przechwytywania zdarzeń, aby wychwycić błędy, szczególnie w przypadku zdarzeń, które nie bańka.

3. Użyj zdarzenia delegacja, która pozwala uniknąć wiążących zdarzeń na każdym obrazie.

4. Aby uniknąć zniknięcia backup.png i kolejnych nieskończonych pętli, jak poniżej:

Błąd Img- > kopia zapasowa.png - > error- > backup.png - > error->,,,,,

Mam ten sam problem. Ten kod działa dobrze w mojej sprawie.

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

Czasami użycie zdarzenia error nie jest możliwe, np. dlatego, że próbujesz zrobić coś na już załadowanej stronie, na przykład uruchamiając kod za pomocą konsoli, bookmarklet lub skryptu załadowanego asynchronicznie. W takim przypadku sprawdzanie, czy img.naturalWidth i img.naturalHeight są równe 0, zdaje się załatwiać sprawę.

Na przykład, oto fragment do przeładowania wszystkich uszkodzonych obrazów z konsoli:

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

Używam poniższego kodu, który najpierw próbuje znaleźć awatar bieżącego użytkownika na podstawie jego identyfikatora użytkownika, który w tym przypadku jest "123", a jeśli nie znajdzie obrazu awatara, kod onerror zmienia img src na obraz zastępczy.

<img src="avatars/users/123.png" onerror="this.src='/ngTribeBase/src/assets/img/avatars/male.png'" />