Visualizzazione immagine alternativa

Question

E 'possibile mostrare un'immagine alternativa se il file sorgente originale non viene trovato? Mi piacerebbe realizzare questo solo con css e html, senza javascript (o jQuery e simili). L'idea è di mostrare un'immagine al posto del test "alt" o del default (brutto) di IE. Se non fosse possibile senza javascript, allora controllerò piuttosto img src con php con un basic if-then-else.

Answer 1

È possibile farlo utilizzando la proprietà background-image CSS dell'elemento img, vale a dire

img 
{ 
background-image:url('default.png'); 
} 

Tuttavia, si deve dare una larghezza o altezza per far funzionare tutto (quando l'img-src non è trovato):

img 
{ 
background-image:url('default.png'); 
width:400px; 
} 

Answer 2

<object data="foobar.png" width=200 height=200> 
    <img src="test.png" alt="Just testing."> 
</object> 

Qui foobar.png è l'immagine primaria, test.png è l'immagine di riserva. Dalla semantica dell'elemento object, il contenuto dell'elemento (qui l'elemento img) deve essere visualizzato se e solo se non è possibile utilizzare i dati primari (specificati dall'attributo data).

Sebbene i browser abbiano riscontrato errori terribili nelle implementazioni di object nell'ultimo anno, questa semplice tecnica sembra funzionare con le versioni moderne di IE, Firefox, Chrome.

Answer 3

Molto semplice e modo migliore per raggiungere questo obiettivo con poco codice

<img class="avatar" src="img/one.jpg" alt="Not Found" onerror=this.src="img/undefined.jpg"> 

Per me la sopra funziona perfettamente!