Nasıl görüntü kırık Simge sadece CSS / HTML kullanarak gizlemek için?

Kırık görüntü simgesini nasıl gizleyebilirim? Örnek :

Hata src ile bir görüntü var:

<img src="Error.src"/>

Çözüm tüm tarayıcılarda çalışmalıdır.

CSS / HTML'nin görüntünün bozuk olup olmadığını bilmesinin bir yolu yoktur, bu nedenle ne olursa olsun JavaScript kullanmanız gerekecek

Ancak, görüntüyü gizlemek veya kaynağı bir yedekle değiştirmek için minimal bir yöntem.

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

veya

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

Güncelleme

Aşağıdaki gibi bir şey yaparak bu mantığı aynı anda birden fazla görüntüye uygulayabilirsiniz:

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">

Güncelleme 2

Bir CSS seçeneği için michalzuber'ın cevabına bakınız. Görüntünün tamamını gizleyemezsiniz, ancak bozuk simgenin görünümünü değiştirirsiniz.

İnsanların burada söylediklerine rağmen, JavaScript'e hiç ihtiyacınız yok, CSS'ye bile ihtiyacınız yok !!

Aslında sadece HTML ile çok yapılabilir ve basit. Bir görüntü yüklenmezse varsayılan bir görüntü bile gösterebilirsiniz . İşte böyle ...

Bu aynı zamanda tüm tarayıcılarda da çalışır (IE8'e kadar bile olsa (Eylül 2015'te ev sahipliği yaptığım sitelere 250.000'den fazla ziyaretçiden, SIFIR insanlar IE8'den daha kötü bir şey kullandı, yani bu çözüm kelimenin tam anlamıyla her şey için çalışıyor ).

Adım 1: Görüntüyü img yerine bir nesne olarak referans alın . Nesneler başarısız olduğunda, kırık simgeler göstermezler; sadece hiçbir şey yapmıyorlar. IE8 ile başlayarak, Object ve Img etiketlerini birbirinin yerine kullanabilirsiniz. Düzenli görüntülerle de tüm görkemli şeyleri yeniden boyutlandırabilir ve yapabilirsiniz. Nesne etiketinden korkmayın; sadece bir etiket, büyük ve hantal hiçbir şey yüklenmiyor ve hiçbir şeyi yavaşlatmıyor. İmg etiketini başka bir adla kullanacaksınız. Bir hız testi bunların aynı şekilde kullanıldığını gösterir.

Adım 2: (İsteğe bağlı, ancak harika) Bu nesnenin içine varsayılan bir resim yapıştırın. İstediğiniz görüntü nesneye gerçekten yüklenirse , varsayılan görüntü gösterilmez. Örneğin, kullanıcı avatarlarının bir listesini gösterebilir ve birisinin sunucuda henüz bir resmi yoksa, yer tutucu görüntüsünü gösterebilir ... hiçbir javascript veya CSS gerekmez, ancak bunun özelliklerini alırsınız. çoğu kişiyi JavaScript alır.

İşte kod ...

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

... Evet, bu kadar basit.

Varsayılan görüntüleri CSS ile uygulamak istiyorsanız, HTML'nizde bunu daha da basitleştirebilirsiniz ...

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

... ve CSS'yi bu yanıttan ekleyin -> https://stackoverflow.com/a/32928240/3196360

Https://bitsofco.de/styling-broken-images/ adresinde harika bir çözüm buldum

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">

Alt = "abc" metniyle alt ekleyecekseniz bozuk küçük resmi göster ve alt ilet abc

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

Alt eklemezseniz, bozuk küçük resmi göster

<img src="pic_trulli.jpg"/>

Bozuk olanı gizlemek istiyorsanız, alt = "" ekleyin , bozuk küçük resim ve herhangi bir alt mesaj göstermez (js kullanmadan)

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

Bozuk olanı gizlemek istiyorsanız, alt = "" & onerror = "this.style.display = 'none'" ekleyin , bozuk küçük resim ve herhangi bir alt mesaj göstermez (js ile)

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

Dördüncüsü biraz tehlikelidir (tam olarak değil), eğer hata olayına herhangi bir görüntü eklemek istiyorsanız, Görüntü stil olarak mevcut olsa bile görüntülenmez. Ekran ekleme gibidir. Bu nedenle, görüntülemek için alternatif bir görüntüye ihtiyacınız olmadığında kullanın.

display: 'none'; // in css

CSS'de verirsek, öğe görüntülenmez (resim, iframe, div gibi).

Resmi görüntülemek istiyorsanız ve hata durumunda tamamen boş alan görüntülemek istiyorsanız, kullanabilirsiniz, ancak bunun herhangi bir yer kaplamayacağına da dikkat edin. Yani, bir div içinde tutmak gerekir olabilir

Bağlantı https://jsfiddle.net/02d9yshw/

Bence en kolay yol, metin girintisi özelliğiyle kırık görüntü simgesini gizlemektir.

img {
    text-indent: -10000px
}

Açıkçası "alt" niteliğini görmek istiyorsanız işe yaramaz.

görüntüyü yer tutucu olarak tutmak / buna ihtiyaç duymanız durumunda, görüntü boyutunu ayarlamak için bir hata ve bazı CSS ile opaklığı 0 olarak değiştirebilirsiniz. Bu şekilde bozuk bağlantıyı göremezsiniz, ancak sayfa normal şekilde yüklenir.

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

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

Ben sevdim cevabını tarafından Nick ve bu çözüm ile takılıyordum. Daha temiz bir yöntem buldum. :: before / :: after pseudos img ve object gibi değiştirilen öğeler üzerinde çalışmadığından, yalnızca nesne verileri (src) yüklenmemişse çalışırlar. HTML'yi daha temiz tutar ve yalnızca nesne yüklenemezse sözde ekler.

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>

Daha sonra doldurulması nedeniyle görüntü kabının görünür olması gerekiyorsa ve gösterme ve gizleme ile uğraşmak istemiyorsanız, src'nin içine 1x1 şeffaf bir görüntü yapıştırabilirsiniz:

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

Bunu tam olarak bu amaçla kullandım. Ajax aracılığıyla içine bir resim yüklenecek bir resim kapsayıcı vardı. Görüntü büyük olduğundan ve yüklenmesi biraz zaman aldığından, bir Gif yükleme çubuğunun CSS'sinde bir arka plan resmi ayarlanması gerekiyordu.

Ancak, src öğesi boş olduğundan, bozuk resim simgesi onu kullanan tarayıcılarda görünmeye devam eder.

Şeffaf 1x1 Gif'in ayarlanması, CSS veya JavaScript aracılığıyla kod eklemeden bu sorunu basit ve etkili bir şekilde giderir.

Yalnızca CSS kullanmak zordur, ancak etiketler background-imageyerine CSS'leri kullanabilirsiniz <img>...

Bunun gibi bir şey:

HTML

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

CSS

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

}

İşte çalışan bir keman .

Not: Görüntünün nerede olacağını göstermek için kemanın üzerindeki CSS kenarlığını ekledim.

Nesne etiketini kullanın. Aşağıdaki gibi etiketlerin arasına alternatif metin ekleyin:

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

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

2005'ten bu yana , Firefox gibi Mozilla tarayıcıları, :-moz-brokentam olarak bu isteği yerine getirebilecek standart olmayan CSS sözde sınıfını destekledi :

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]::beforeAyrıca Firefox 64'te de çalışır (bir zamanlar bu img[alt]::aftergüvenilir değildi). Bunlardan ikisini Chrome 71'de çalıştıramadım.

Bu yolu bir css çözümü olarak takip edebilirsiniz

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">

Eksik görüntüler ya hiçbir şey göstermez ya da bir [? ] stil kutusu kaynak bulunamadı. Bunun yerine, bir şeyin yanlış olduğuna dair daha iyi görsel geri bildirim olması gerektiğinden emin olduğunuz bir "eksik görüntü" grafiğiyle değiştirmek isteyebilirsiniz. Veya tamamen gizlemek isteyebilirsiniz. Bu mümkündür, çünkü bir tarayıcının görüntüleyemediği görüntüler, izleyebileceğimiz bir "hata" JavaScript etkinliğinde ateş bulamaz.

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

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

Ayrıca, bu gerçekleştiğinde site yöneticisine e-posta göndermek için bir çeşit Ajax eylemini tetiklemek isteyebilirsiniz.

Hile img::afteriyi bir şey, ama en az 2 olumsuz tarafı vardır:

1. tüm tarayıcılar tarafından desteklenmez (ör. Edge'de çalışmaz https://codepen.io/dsheiko/pen/VgYErm )
2. görüntüyü gizleyemezsiniz, örtersiniz - bu durumda durumda varsayılan bir görüntüyü göstereceğinizde o kadar yararlı olmaz

JavaScript olmadan evrensel bir çözüm bilmiyorum, ancak Firefox için sadece güzel bir çözüm var:

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

Başkaları tarafından tarif edilenle aynı fikir React'ta aşağıdaki gibi çalışır:

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

Herhangi bir kod gerektirmeden bunu yapmanın temel ve çok basit bir yolu, sadece boş bir alt deyimi sağlamaktır. Tarayıcı daha sonra resmi boş olarak döndürür. Görüntü orada değilse sanki.

Misal:

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

Görmek için deneyin! ;)

Gelecekteki Google çalışanları için, 2016'da özellik seçiciyi kullanarak boş resimleri gizlemenin tarayıcı açısından güvenli bir saf CSS yolu vardır:

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

Düzenleme: Geri döndüm - gelecekteki googlers için, 2019'da Shadow Dom'da gerçek alt metin ve alt metin görüntüsünü stilize etmenin bir yolu var, ancak sadece geliştirici araçlarında çalışıyor. Yani kullanamazsın. Afedersiniz. Çok güzel olurdu.

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