Bagaimana cara menyembunyikan Icon gambar yang rusak hanya menggunakan CSS / HTML?

Bagaimana saya bisa menyembunyikan ikon gambar yang rusak? Contoh :

Saya memiliki gambar dengan src kesalahan:

<img src="Error.src"/>

Solusinya harus bekerja di semua browser.

Tidak ada cara bagi CSS / HTML untuk mengetahui apakah gambar itu rusak, jadi Anda harus menggunakan JavaScript apa pun yang terjadi.

Tapi di sini ada metode minimal untuk menyembunyikan gambar, atau mengganti sumber dengan cadangan.

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

atau

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

Memperbarui

Anda dapat menerapkan logika ini ke banyak gambar sekaligus dengan melakukan sesuatu seperti ini:

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

<img src="error.src">
<img src="error.src">
<img src="error.src">
<img src="error.src">

Perbarui 2

Untuk opsi CSS lihat jawaban michalzuber di bawah ini. Anda tidak dapat menyembunyikan seluruh gambar, tetapi Anda mengubah tampilan ikon yang rusak.

Terlepas dari apa yang dikatakan orang di sini, Anda sama sekali tidak memerlukan JavaScript, Anda bahkan tidak perlu CSS !!

Ini sebenarnya sangat bisa dilakukan dan sederhana dengan HTML saja. Anda bahkan dapat menampilkan gambar default jika gambar tidak dimuat . Begini caranya ...

Ini juga berfungsi pada semua browser, bahkan sejauh IE8 (dari 250.000 lebih pengunjung ke situs yang saya host pada September 2015, orang-orang NOL menggunakan sesuatu yang lebih buruk daripada IE8, yang berarti solusi ini benar - benar berfungsi untuk semuanya ).

Langkah 1: Referensi gambar sebagai objek bukan img . Ketika benda gagal mereka tidak menunjukkan ikon yang rusak; mereka tidak melakukan apa-apa. Dimulai dengan IE8, Anda dapat menggunakan tag Object dan Img secara bergantian. Anda dapat mengubah ukuran dan melakukan semua hal mulia yang Anda bisa dengan gambar biasa juga. Jangan takut dengan tag objek; itu hanya sebuah tag, tidak ada yang besar dan besar yang dimuat dan tidak memperlambat apa pun. Anda hanya akan menggunakan tag img dengan nama lain. Tes kecepatan menunjukkan bahwa mereka digunakan secara identik.

Langkah 2: (Opsional, tapi mengagumkan) Tempel gambar default di dalam objek itu. Jika gambar yang Anda inginkan benar-benar dimuat di objek , gambar default tidak akan ditampilkan. Jadi misalnya Anda bisa menampilkan daftar avatar pengguna, dan jika seseorang belum memiliki gambar di server, itu bisa menampilkan gambar placeholder ... tidak perlu javascript atau CSS sama sekali, tetapi Anda mendapatkan fitur apa mengambil sebagian besar orang JavaScript.

Ini kodenya ...

<object data="avatar.jpg" type="image/jpg">
    <img src="default.jpg" />
</object>

... Ya, sesederhana itu.

Jika Anda ingin menerapkan gambar default dengan CSS, Anda dapat membuatnya lebih sederhana di HTML Anda seperti ini ...

<object class="avatar" data="user21.jpg" type="image/jpg"></object>

... dan tambahkan saja CSS dari jawaban ini -> https://stackoverflow.com/a/32928240/3196360

Menemukan solusi hebat di https://bitsofco.de/styling-broken-images/

img {  
  position: relative;
}

/* style this to fit your needs */
/* and remove [alt] to apply to all images*/
img[alt]:after {  
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  font-family: 'Helvetica';
  font-weight: 300;
  line-height: 2;  
  text-align: center;
  content: attr(alt);
}

<img src="error">
<br>
<img src="broken" alt="A broken image">
<br>
<img src="https://images-na.ssl-images-amazon.com/images/I/218eLEn0fuL.png" alt="A bird" style="width: 120px">

Jika Anda akan menambahkan alt dengan teks alt = "abc" maka akan muncul tampilan thumbnail yang rusak, dan alt pesan abc

<img src="pic_trulli.jpg" alt="abc"/>

Jika Anda tidak akan menambahkan alt itu akan menampilkan pertunjukan thumbnail yang rusak

<img src="pic_trulli.jpg"/>

Jika Anda ingin menyembunyikan yang rusak cukup tambahkan alt = "" itu tidak akan menampilkan thumbnail yang rusak dan semua pesan alt (tanpa menggunakan js)

<img src="pic_trulli.jpg" alt=""/>

Jika Anda ingin menyembunyikan yang rusak cukup tambahkan alt = "" & onerror = "this.style.display = 'none'" itu tidak akan menampilkan thumbnail yang rusak dan semua pesan alt (dengan js)

<img src="pic_trulli.jpg" alt="abc" onerror="this.style.display='none'"/>

Yang ke-4 agak berbahaya (tidak persis), jika Anda ingin menambahkan gambar apa pun di acara onerror, gambar itu tidak akan ditampilkan meskipun Gambar ada sebagai style.display seperti menambahkan. Jadi, gunakan ketika Anda tidak memerlukan gambar alternatif untuk ditampilkan.

display: 'none'; // in css

Jika kita berikan dalam CSS, maka item tidak akan ditampilkan (seperti gambar, iframe, div seperti itu).

Jika Anda ingin menampilkan gambar & Anda ingin menampilkan ruang yang benar-benar kosong jika kesalahan, maka Anda dapat menggunakan, tetapi juga berhati-hati ini tidak akan mengambil ruang apa pun. Jadi, Anda perlu menyimpannya dalam div mungkin

Tautan https://jsfiddle.net/02d9yshw/

Saya pikir cara termudah adalah dengan menyembunyikan ikon gambar yang rusak oleh properti indent teks.

img {
    text-indent: -10000px
}

Jelas itu tidak berfungsi jika Anda ingin melihat atribut "alt".

jika Anda ingin menjaga / membutuhkan gambar sebagai pengganti, Anda bisa mengubah opacity menjadi 0 dengan onerror dan beberapa CSS untuk mengatur ukuran gambar. Dengan cara ini Anda tidak akan melihat tautan yang rusak, tetapi halaman dimuat seperti biasa.

<img src="<your-image-link->" onerror="this.style.opacity='0'" />

img {
    width: 75px;
    height: 100px;
}

Saya menyukai jawaban oleh Nick dan bermain-main dengan solusi ini. Menemukan metode yang lebih bersih. Sejak :: sebelum / :: setelah pseudo tidak bekerja pada elemen yang diganti seperti img dan objek, mereka hanya akan berfungsi jika data objek (src) tidak dimuat. Itu membuat HTML lebih bersih dan hanya akan menambahkan pseudo jika objek gagal dimuat.

object {
  position: relative;
  float: left;
  display: block;
  width: 200px;
  height: 200px;
  margin-right: 20px;
  border: 1px solid black;
}
object::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  background: red url("http://placehold.it/200x200");
}

<object data="http://lorempixel.com/200/200/people/1" type="image/png"></object>

<object data="http://broken.img/url" type="image/png"></object>

Jika Anda masih harus memiliki wadah gambar yang terlihat karena sedang diisi nanti dan tidak ingin repot dengan menunjukkan dan menyembunyikannya Anda dapat menempelkan gambar transparan 1x1 di dalam src:

<img id="active-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>

Saya menggunakan ini untuk tujuan yang tepat ini. Saya memiliki wadah gambar yang akan memuat gambar ke dalamnya melalui Ajax. Karena gambar itu besar dan butuh sedikit untuk memuat, diperlukan pengaturan latar belakang gambar dalam CSS dari bilah pemuatan Gif.

Namun, karena src dari itu kosong, ikon gambar yang rusak masih muncul di browser yang menggunakannya.

Mengatur transparan 1x1 Gif memperbaiki masalah ini secara sederhana dan efektif tanpa penambahan kode melalui CSS atau JavaScript.

Menggunakan CSS saja itu sulit, tetapi Anda bisa menggunakan CSS background-imagedaripada <img>tag ...

Sesuatu seperti ini:

HTML

<div id="image"></div>

CSS

#image {
    background-image: url(Error.src);
    width: //width of image;
    height: //height of image;

}

Ini biola yang berfungsi .

Catatan: Saya menambahkan perbatasan di CSS pada biola hanya untuk menunjukkan di mana gambar akan berada.

Gunakan tag objek. Tambahkan teks alternatif di antara tag seperti ini:

<object data="img/failedToLoad.png" type="image/png">Alternative Text</object>

http://www.w3schools.com/tags/tag_object.asp

Sejak 2005 , browser Mozilla seperti Firefox telah mendukung :-moz-brokenpseudo-class CSS non-standar yang dapat memenuhi persis permintaan ini:

td {
  min-width:64px; /* for display purposes so you can see the empty cell */
}

img[alt]:-moz-broken {
  display:none;
}

<table border="1"><tr><td>
  <img src="error">
</td><td>
  <img src="broken" alt="A broken image">
</td><td>
  <img src="https://images-na.ssl-images-amazon.com/images/I/218eLEn0fuL.png"
       alt="A bird" style="width: 120px">
</td></tr></table>

img[alt]::beforejuga berfungsi di Firefox 64 (meskipun pernah img[alt]::afterjadi ini tidak dapat diandalkan). Saya tidak dapat mengaktifkan keduanya di Chrome 71.

Anda dapat mengikuti jalur ini sebagai solusi css

img {
        width:200px;
        height:200px;
        position:relative
   }
img:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: inherit;
        height: inherit;
        background: #ebebeb url('http://via.placeholder.com/300?text=PlaceHolder') no-repeat center;
        color: transparent;
    }

<img src="gdfgd.jpg">

Gambar yang hilang hanya akan menampilkan apa-apa, atau menampilkan [? ] kotak gaya saat sumbernya tidak dapat ditemukan. Alih-alih, Anda mungkin ingin menggantinya dengan grafik "gambar hilang" yang Anda yakini ada sehingga ada umpan balik visual yang lebih baik bahwa ada sesuatu yang salah. Atau, Anda mungkin ingin menyembunyikannya sepenuhnya. Ini dimungkinkan, karena gambar yang tidak dapat ditemukan oleh browser dari peristiwa JavaScript "kesalahan" yang dapat kita tonton.

    //Replace source
    $('img').error(function(){
            $(this).attr('src', 'missing.png');
    });

   //Or, hide them
   $("img").error(function(){
           $(this).hide();
   });

Selain itu, Anda mungkin ingin memicu semacam tindakan Ajax untuk mengirim email ke admin situs saat ini terjadi.

Triknya img::afteradalah hal yang baik, tetapi memiliki paling tidak 2 kelemahan:

1. tidak didukung oleh semua browser (mis. tidak berfungsi di Edge https://codepen.io/dsheiko/pen/VgYErm )
2. Anda tidak bisa begitu saja menyembunyikan gambar, Anda menutupinya - jadi tidak membantu ketika Anda apa yang harus menunjukkan gambar default dalam kasus ini

Saya tidak tahu solusi universal tanpa JavaScript, tetapi untuk Firefox hanya ada yang bagus:

img:-moz-broken{
  opacity: 0;
}

Gagasan yang sama seperti yang dijelaskan oleh orang lain bekerja di Bereaksi sebagai berikut:

<img src='YOUR-URL' onError={(e) => e.target.style.display='none' }/>

Cara dasar dan sangat sederhana untuk melakukan ini tanpa kode apa pun yang diperlukan adalah dengan hanya memberikan pernyataan alt kosong. Browser kemudian akan mengembalikan gambar sebagai kosong. Akan terlihat seperti jika gambar tidak ada di sana.

Contoh:

<img class="img_gal" alt="" src="awesome.jpg">

Cobalah untuk melihat! ;)

Untuk googler di masa mendatang, pada tahun 2016 ada cara CSS murni yang aman dari peramban menyembunyikan gambar kosong menggunakan pemilih atribut:

img[src="Error.src"] {
    display: none;
}

Sunting: Saya kembali - untuk googler masa depan, pada tahun 2019 ada cara untuk men-style teks alt aktual dan gambar teks alt di Shadow Dom, tetapi hanya berfungsi di alat pengembang. Jadi kamu tidak bisa menggunakannya. Maaf. Akan sangat menyenangkan.

#alttext-container {
    opacity: 0;
}
#alttext-image {
    opacity: 0;
}
#alttext {
    opacity: 0;
}