Home>Snippets>Dare uno stile alle immagini corrotte

Dare uno stile alle immagini corrotte


Dare uno stile alle immagini corrotte


Spesso può capitare che qualche immagine del tuo sito non sia raggiungibile, perché è stata eliminata per sbaglio o magari perché rinominata non aggiornando il link. Quando questo accade, i browser inseriscono delle icone al posto delle immagini corrotte. Ma è possibile tramite Css o jQuery dare uno stile personalizzato e più curato nel caso in cui si verifichi l’evenienza.

  • Leggi l'articolo, ti bastano solo 1 minuto, 46 secondi
    Sei di fretta? Scarica il PDF e consultalo quando vuoi!

Il codice: CSS

È sufficiente inserire all’interno del tuo foglio di stile, le seguenti righe:

img:before { 
	background-color: rgb( 230, 230, 230 );
	border: 2px dotted rgb( 200, 200, 200 );
	border-radius: 5px;
	content: " ";
	display: block;
	height: calc( 100% + 10px );
	left: 0;
	position: absolute;
	top: -10px;
	width: 100%;
}

img:after {  
	color: rgb( 100, 100, 100 );
	content: "Immagine momentaneamente non disponibile";
	display: block;
	font-size: 16px;
	font-style: normal;
	left: 0;
	position: absolute;
	text-align: center;
	top: 5px;
	width: 100%;
}

È importante ricordarti di assegnare al contenitore dell’immagine la regola Css position: relative;, per evitare che gli pseudo selettori :before e :after, posizionati in modo assoluto, si espandano in maniera incontrollata coprendo i contenuti della tua pagina.

Ecco il risultato, che ovviamente puoi personalizzare a piacimento modificando il Css proposto:


Il codice: jQuery

La correzione dei problemi dovuti alle immagini corrotte può essere effettuata anche tramite jQuery, con un semplicissimo script:

jQuery( function( $ ) {
	$( 'img' ).error( function() {

		$( this ).attr( 'src', 'img/broken.png');
	
} );
} );

Nel codice proposto, basta inserire il percorso relativo dell’immagine che vogliamo utilizzare in caso di immagini corrotte (nell’esempio: img/broken.png).

Nota bene, che in questo caso, è necessario avere inserito la libreria di jQuery nella nostra pagina.

Per includere la libreria di jQuery nella tua pagina, puoi utilizzare diversi modi:
Scaricare il file dal sito ufficiale di jQuery ed aggiungere alla tua pagina il seguente codice, preferibilmente prima della chiusura del tag body:

<script src="cartella_in_cui_hai_inserito_jquery/jquery-3.2.1.min.js"></script>

Oppure, sfruttando la CDN messa a disposizione da Google:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


Ti è piaciuto questo articolo? Regalami un click per ripagarmi dello sforzo



Code4Life ti è stato utile? Sostienici con una donazione!

Dona con PayPal

Hai trovato interessante l’articolo? Allora ti consiglio di leggere:

Come aggiungere formati immagine personalizzati in WordPress

Come aggiungere formati immagine personalizzati in WordPress


Impariamo a creare nuovi formati immagine, in aggiunta a quelli predefiniti, da utilizzare nel nostro tema aumentando le prestazioni del nostro sito.

Limitare la lunghezza del titolo in WordPress

Limitare la lunghezza del titolo in WordPress


Impariamo a limitare il numero di caratteri nella visualizzazione del titolo di articoli e pagine in WordPress, sostituendo l’eventuale eccesso con un carattere di troncamento.

Oppure cerca tra gli articoli correlati


E tu cosa ne pensi? Condividi la tua opinione e discutiamone insieme
La tua email non sarà resa pubblico o utilizzata per inviarti spam, te lo prometto

Iscrivimi alla newsletter per ricevere news ed aggiornamenti
Utilizziamo piattaforme di terze parti per l’invio di newsletter. (Informativa sulla privacy)
Tienimi aggiornato su questo articolo
Ricevi una email di notifica quando qualcuno scriverà un commento a questo articolo. (Informativa sulla privacy)
Ricorda i miei dati per la prossima volta che scriverò un commento
Il tuo nome e la tua email verranno salvati in un cookie in questo browser. (Informativa sulla privacy)