Jak po cichu ukryć ikonę „Nie znaleziono obrazu”, gdy nie znaleziono źródłowego obrazu źródłowego

Czy wiesz, jak ukryć klasyczną ikonę „Nie znaleziono obrazu” na renderowanej stronie HTML, gdy plik obrazu nie został znaleziony?

Jakaś metoda pracy wykorzystująca JavaScript / jQuery / CSS?

Możesz użyć onerrorzdarzenia w JavaScript, aby działać, gdy obraz się nie ładuje:

var img = document.getElementById("myImg");
img.onerror = function () { 
    this.style.display = "none";
}

W jQuery (skoro pytałeś):

$("#myImg").error(function () { 
    $(this).hide(); 
});

Lub dla wszystkich obrazów:

$("img").error(function () { 
    $(this).hide();
    // or $(this).css({visibility:"hidden"}); 
});

Należy używać visibility: hiddenzamiast, .hide()jeśli ukrycie obrazów może zmienić układ. Wiele witryn internetowych używa zamiast tego domyślnego obrazu „bez obrazu”, wskazując srcatrybut na ten obraz, gdy określona lokalizacja obrazu jest niedostępna.

<img onerror='this.style.display = "none"'>

Nieznacznie zmodyfikowałem rozwiązanie zaproponowane przez Gary'ego Willoughby'ego, ponieważ na krótko pokazuje zepsutą ikonę obrazu. Moje rozwiązanie:

    <img src="..." style="display: none" onload="this.style.display=''">

W moim rozwiązaniu obraz jest początkowo ukryty i jest wyświetlany tylko po pomyślnym załadowaniu. Ma tę wadę: użytkownicy nie zobaczą w połowie załadowanych obrazów. A jeśli użytkownik wyłączył JS, nigdy nie zobaczy żadnych obrazów

Aby ukryć każdy błąd obrazu, po prostu dodaj ten JavaScript u dołu strony (tuż przed zamykającym tagiem body):

(function() {
    var allimgs = document.images;
    for (var i = 0; i < allimgs.length; i++) {
        allimgs[i].onerror = function() {
            this.style.visibility = "hidden"; // Other elements aren't affected. 
        }
    }
})();

Odpowiedź może być trochę za późno, ale oto moja próba. Kiedy napotkałem ten sam problem, naprawiłem go, używając elementu div o rozmiarze obrazu i ustawiając obraz tła dla tego elementu div. Jeśli obraz nie zostanie znaleziony, element div jest renderowany jako przezroczysty, więc wszystko odbywa się cicho bez kodu skryptu java.

Robiąc szybkie badanie odpowiedzi Andy'ego E , nie można go live()powiązać error.

// won't work (chrome 5)
$('img').live('error', function(){
     $(this).css('visibility', 'hidden');
});

Więc musisz iść jak

$('<img/>', {
  src:    'http://www.notarget.com/fake.jpg',
  error:  function(e){
    $(this).css('visibility', 'hidden');
  }
}).appendTo(document.body);

bezpośrednio wiążąc się error event handlerz tworzeniem nowego elementu.

Znalazłem sprytną metodę, aby to zrobić, będąc nadal funkcjonalnym, gdy używam ng-srcdyrektywy w Angular.js i tak jak ...

<img
  ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}" 
  onerror="this.src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='"
  />

jest to w zasadzie najkrótszy przezroczysty GIF (jak widać http://proger.i-forge.net/%D0%9A%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82% D0% B5% D1% 80 / [20121112]% 20The% 20smallest% 20transparent% 20pixel.html )

oczywiście ten gif może być przechowywany w jakiejś zmiennej globalnej, więc nie zepsuje szablonów.

<script>
  window.fallbackGif = "..."
</script>

I użyć

<img
  ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}" 
  onerror="this.src=fallbackGif"
  />

itp.

Po prostu użyj prostego CSS

.AdminImageHolder {
display: inline-block;
min-width: 100px;
max-width: 100px;
min-height: 100px;
max-height: 100px;
background: url(img/100x100.png) no-repeat;
border: 1px solid #ccc;
}