Come nascondere l'icona rotta dall'immagine usando solo CSS / HTML?

Come posso nascondere l'icona dell'immagine rotta? Esempio :

Ho un'immagine con errore src:

<img src="Error.src"/>

La soluzione deve funzionare in tutti i browser.

Non c'è modo per CSS / HTML di sapere se l'immagine è un link non funzionante, quindi dovrai usare JavaScript a prescindere

Ma ecco un metodo minimo per nascondere l'immagine o sostituire l'origine con un backup.

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

o

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

Aggiornare

Puoi applicare questa logica a più immagini contemporaneamente facendo una cosa del genere:

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

Aggiornamento 2

Per un'opzione CSS vedere la risposta di michalzuber di seguito. Non puoi nascondere l'intera immagine, ma cambi l'aspetto dell'icona rotta.

Nonostante ciò che la gente dice qui, non hai bisogno di JavaScript, non hai nemmeno bisogno di CSS !!

In realtà è molto fattibile e semplice solo con HTML. Puoi anche mostrare un'immagine predefinita se un'immagine non viene caricata . Ecco come...

Questo funziona anche su tutti i browser, anche fino a IE8 (su oltre 250.000 visitatori di siti che ho ospitato a settembre 2015, le persone di ZERO hanno usato qualcosa di peggio di IE8, il che significa che questa soluzione funziona letteralmente per tutto ).

Passaggio 1: fare riferimento all'immagine come oggetto anziché come img . Quando gli oggetti falliscono, non mostrano icone rotte; non fanno proprio niente. A partire da IE8, è possibile utilizzare i tag Object e Img in modo intercambiabile. Puoi ridimensionare e fare tutte le cose gloriose che puoi anche con le immagini normali. Non aver paura del tag object; è solo un tag, non viene caricato nulla di grosso e voluminoso e non rallenta nulla. Utilizzerai il tag img con un altro nome. Un test di velocità mostra che vengono utilizzati in modo identico.

Passaggio 2: (opzionale, ma fantastico) Stick un'immagine predefinita all'interno di quell'oggetto. Se l'immagine desiderata viene effettivamente caricata nell'oggetto , l'immagine predefinita non verrà visualizzata. Quindi, ad esempio, potresti mostrare un elenco di avatar utente e se qualcuno non ha ancora un'immagine sul server, potrebbe mostrare l'immagine del segnaposto ... nessun javascript o CSS richiesto, ma ottieni le funzionalità di ciò prende la maggior parte delle persone JavaScript.

Ecco il codice ...

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

... Sì, è così semplice.

Se vuoi implementare immagini predefinite con CSS, puoi renderlo ancora più semplice nel tuo HTML in questo modo ...

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

... e aggiungi il CSS da questa risposta -> https://stackoverflow.com/a/32928240/3196360

Ho trovato un'ottima soluzione su 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">

Se aggiungerai alt con il testo alt = "abc" mostrerà la miniatura corrotta mostra e il messaggio alt abc

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

Se non aggiungerai alt, verrà mostrata la miniatura dello show corrotto

<img src="pic_trulli.jpg"/>

Se vuoi nascondere quello rotto basta aggiungere alt = "" non mostrerà la miniatura corrotta e nessun messaggio alt (senza usare js)

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

Se vuoi nascondere quello rotto aggiungi semplicemente alt = "" & onerror = "this.style.display = 'none'" non mostrerà la miniatura corrotta e nessun messaggio alt (con js)

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

Il quarto è un po 'pericoloso (non esattamente), se si desidera aggiungere un'immagine all'evento onerror, non verrà visualizzato anche se l'immagine esiste come style.display è come aggiungere. Quindi, usalo quando non hai bisogno di alcuna immagine alternativa per la visualizzazione.

display: 'none'; // in css

Se lo diamo in CSS, l'elemento non verrà visualizzato (come immagine, iframe, div così).

Se si desidera visualizzare l'immagine e si desidera visualizzare uno spazio totalmente vuoto in caso di errore, è possibile utilizzare, ma anche fare attenzione a non occupare spazio. Quindi, è necessario tenerlo in un div potrebbe essere

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

Penso che il modo più semplice sia nascondere l'icona dell'immagine spezzata dalla proprietà indentazione del testo.

img {
    text-indent: -10000px
}

Ovviamente non funziona se vuoi vedere l'attributo "alt".

nel caso in cui ti piace mantenere / necessitare l'immagine come segnaposto, puoi modificare l'opacità su 0 con un onerror e alcuni CSS per impostare la dimensione dell'immagine. In questo modo non vedrai il link interrotto, ma la pagina si carica normalmente.

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

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

Mi è piaciuta la risposta di Nick e stavo giocando con questa soluzione. Trovato un metodo più pulito. Poiché gli pseudos :: before / :: after non funzionano su elementi sostituiti come img e object funzioneranno solo se i dati dell'oggetto (src) non vengono caricati. Mantiene l'HTML più pulito e aggiungerà lo pseudo solo se l'oggetto non riesce a caricare.

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>

Se hai ancora bisogno di avere il contenitore dell'immagine visibile perché è stato compilato in un secondo momento e non vuoi preoccuparti di mostrarlo e nasconderlo, puoi attaccare un'immagine trasparente 1x1 all'interno di src:

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

L'ho usato per questo preciso scopo. Avevo un contenitore di immagini che avrebbe caricato un'immagine tramite Ajax. Poiché l'immagine era di grandi dimensioni e richiedeva un po 'di caricamento, era necessario impostare un'immagine di sfondo nel CSS di una barra di caricamento Gif.

Tuttavia, poiché l'src dell'elemento era vuoto, l'icona delle immagini rotte appariva ancora nei browser che la utilizzano.

L'impostazione di 1x1 Gif trasparente risolve questo problema in modo semplice ed efficace senza aggiunte di codice tramite CSS o JavaScript.

Usare solo CSS è difficile, ma potresti usare CSS background-imageinvece di <img>tag ...

Qualcosa come questo:

HTML

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

CSS

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

}

Ecco un violino funzionante .

Nota: ho aggiunto il bordo nel CSS sul violino solo per dimostrare dove sarebbe stata l'immagine.

Usa il tag object. Aggiungi testo alternativo tra i tag in questo modo:

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

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

Dal 2005 , i browser Mozilla come Firefox supportano la :-moz-brokenpseudo-classe CSS non standard in grado di soddisfare esattamente questa richiesta:

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]::beforefunziona anche con Firefox 64 (anche se una volta era img[alt]::aftercosì non è affidabile). Non riesco a far funzionare nessuno di questi in Chrome 71.

Puoi seguire questo percorso come soluzione 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">

Le immagini mancanti non visualizzeranno nulla o visualizzeranno un [? ] box di stile quando non è possibile trovare la loro fonte. Invece potresti voler sostituire quello con un'immagine "immagine mancante" che sei sicuro che esista, quindi c'è un miglior feedback visivo che qualcosa non va. Oppure, potresti volerlo nascondere del tutto. Questo è possibile perché le immagini che un browser non riesce a trovare generano un evento JavaScript "errore" che possiamo guardare.

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

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

Inoltre, potresti voler attivare una sorta di azione Ajax per inviare un'email a un amministratore del sito quando ciò si verifica.

Il trucco con img::afterè una buona roba, ma ha almeno 2 aspetti negativi:

1. non supportato da tutti i browser (ad es. non funziona su Edge https://codepen.io/dsheiko/pen/VgYErm )
2. non puoi semplicemente nascondere l'immagine, la copri, quindi non è utile quando mostri un'immagine predefinita nel caso

Non conosco una soluzione universale senza JavaScript, ma solo per Firefox ce n'è una bella:

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

La stessa idea descritta da altri funziona in React come segue:

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

Un modo semplice e molto semplice per farlo senza alcun codice richiesto sarebbe quello di fornire semplicemente un'istruzione alt vuota. Il browser restituirà quindi l'immagine come vuota. Sembrerebbe che l'immagine non ci fosse.

Esempio:

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

Provalo per vedere! ;)

Per i futuri googler, nel 2016 esiste un modo CSS sicuro per browser per nascondere immagini vuote utilizzando il selettore di attributi:

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

Modifica: sono tornato - per i futuri googler, nel 2019 c'è un modo per modellare il testo alt e l'immagine del testo alt in Shadow Dom, ma funziona solo con strumenti di sviluppo. Quindi non puoi usarlo. Scusate. Sarebbe così bello

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