Bagaimanakah Saya Boleh Menyembunyikan Ikon Imej Patah Menggunakan JavaScript, jQuery atau CSS?

Senyap Menyembunyikan Ikon "Imej Tidak Ditemui" dengan JavaScript/jQuery/CSS

Apabila imej tiada daripada halaman HTML yang diberikan, lalai Ikon "Imej tidak ditemui" boleh mengganggu dan mengganggu pengalaman pengguna. Nasib baik, terdapat beberapa kaedah untuk menyembunyikan ikon ini menggunakan pelbagai teknologi.

JavaScript/jQuery

Kaedah paling mudah melibatkan penggunaan pengendali peristiwa onerror. Apabila imej gagal dimuatkan, peristiwa onerror dicetuskan, membolehkan anda melaksanakan tindakan tersuai. Satu tindakan sedemikian ialah menyembunyikan imej:

<img onerror="this.style.display = 'none';" src="path/to/image.png">

CSS

CSS menawarkan pendekatan yang lebih mudah dengan menentukan gaya khusus untuk imej yang gagal dimuatkan. Menggunakan sifat paparan, anda boleh menetapkan keterlihatan imej kepada tersembunyi:

img.hide-if-failed {
    display: none;
}

Kemudian, tetapkan kelas ini kepada imej:

<img class="hide-if-failed" src="path/to/image.png">

Menggunakan JavaScript/jQuery untuk Menyembunyikan Elemen Lain

Jika ikon "Imej tidak ditemui" terkandung dalam elemen lain, seperti div, anda boleh menggunakan JavaScript atau jQuery untuk menyembunyikan elemen induk apabila imej gagal dimuatkan:

$('img').on('error', function() {
  $(this).parent().hide();
});

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyembunyikan Ikon Imej Patah Menggunakan JavaScript, jQuery atau CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!