Bagaimanakah Saya Boleh Menyembunyikan atau Menggantikan Imej Rosak Menggunakan CSS dan HTML?

Menyembunyikan Pemegang Tempat Imej Rosak dengan CSS/HTML

Walaupun terdapat batasan CSS dan HTML dalam mengesan pautan imej yang rosak, terdapat penyelesaian yang minimum untuk sembunyikan atau uruskan kejadian sedemikian.

Menyembunyikan Patah Imej

Untuk mengaburkan ruang letak imej yang rosak, anda boleh menggunakan atribut onerror dalam tag:

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

Dengan atribut ini, apabila imej gagal dimuatkan, paparannya akan disembunyikan.

Menggantikan dengan Imej Sandaran

Sebagai alternatif, anda boleh menentukan imej sandaran sekiranya pautan terputus:

<img src="Error.src" onerror="this.src='fallback-img.jpg'" />

Apabila imej gagal dimuatkan, sumber akan ditukar kepada imej sandaran yang ditentukan.

Nota: Walaupun CSS dan HTML sahaja tidak dapat membezakan antara imej yang rosak dan sah, atribut onerror boleh berguna untuk mengendalikan ruang letak imej yang rosak dalam kedua-dua kes.

Tambahan Pilihan

Untuk mengurus berbilang imej yang rosak merentas tapak anda, JavaScript menyediakan penyelesaian yang lebih mantap. Anda boleh melampirkan pendengar acara pada DOM dan menggunakan logik yang sama pada semua imej pada halaman:

document.addEventListener("DOMContentLoaded", function(event) {
   document.querySelectorAll('img').forEach(function(img){
      img.onerror = function(){this.style.display='none';};
   })
});

Skrip ini akan menggunakan paparan: tiada gaya pada semua imej yang rosak selepas DOM dimuatkan sepenuhnya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyembunyikan atau Menggantikan Imej Rosak Menggunakan CSS dan HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!