Cara menyembunyikan ikon "Gambar tidak ditemukan" secara diam-diam saat gambar sumber src tidak ditemukan

Apakah Anda tahu cara menyembunyikan ikon klasik "Gambar tidak ditemukan" dari halaman HTML yang dirender saat file gambar tidak ditemukan?

Adakah metode kerja yang menggunakan JavaScript / jQuery / CSS?

Anda dapat menggunakan onerroracara di JavaScript untuk bertindak saat gambar gagal dimuat:

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

Di jQuery (karena Anda bertanya):

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

Atau untuk semua gambar:

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

Anda harus menggunakan visibility: hiddenalih-alih .hide()jika menyembunyikan gambar dapat mengubah tata letak. Banyak situs di web menggunakan gambar "tanpa gambar" default, yang mengarahkan srcatribut ke gambar tersebut saat lokasi gambar yang ditentukan tidak tersedia.

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

Saya sedikit memodifikasi solusi yang disarankan oleh Gary Willoughby, karena ini menunjukkan ikon gambar yang rusak secara singkat. Solusi saya:

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

Dalam solusi saya, gambar awalnya disembunyikan dan hanya ditampilkan jika berhasil dimuat. Ini memiliki kelemahan: pengguna tidak akan melihat gambar yang setengah dimuat. Dan jika pengguna telah menonaktifkan JS maka mereka tidak akan pernah melihat gambar apapun

Untuk menyembunyikan setiap kesalahan gambar, cukup tambahkan JavaScript ini di bagian bawah halaman Anda (tepat sebelum penutup body tag):

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

Mungkin agak terlambat untuk menjawabnya, tapi inilah usaha saya. Ketika saya menghadapi masalah yang sama saya memperbaikinya dengan menggunakan div ukuran gambar & pengaturan gambar latar belakang ke div ini. Jika gambar tidak ditemukan, div dibuat transparan, jadi semuanya dilakukan secara diam-diam tanpa kode java-script.

Melakukan penelitian cepat terhadap jawaban Andy E , tidak mungkin live()mengikat error.

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

Jadi, Anda harus pergi seperti

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

langsung mengikat error event handleruntuk membuat elemen baru.

saya telah menemukan metode yang bagus untuk melakukan hal ini, sementara masih berfungsi saat menggunakan ng-srcdirektif di Angular.js dan suka ...

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

itu pada dasarnya adalah GIF transparan terpendek (seperti yang terlihat http://proger.i-forge.net/%D0%9A%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82% D0% B5% D1% 80 / [20121112]% 20% 20termallest% 20transparent% 20pixel.html )

tentu saja gif ini dapat disimpan di dalam beberapa variabel global sehingga tidak akan mengacaukan template.

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

dan gunakan

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

dll.

Gunakan saja css sederhana

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