Durante la progettazione di un sito web, ci troviamo a inserire varie immagini all'interno del layout; immagini che possono essere statiche, dinamiche o modificabili dall'utente. In tutte le varianti disponibili, una cosa rimane costante: la possibilità che l'immagine non esista, non sia disponibile o che il percorso stesso sia errato.
In questi casi la presentazione risulterà inevitabilmente alterata, ma possiamo gestire la situazione con poche righe di JavaScript.
<img src="/mia-immagine.png" onerror="this.remove()" />
Benchè questo metodo permetta di avere sempre un'interfaccia pulita, non ci da modo di notare l'errore: potremmo non accorgerci mai della presenza dell'immagine se questa viene continuamente eliminata dal DOM. Proviamo a porvi rimedio caricando un'immagine di fallback, che permetta di riconoscere l'errore e allo stesso tempo mostrare una UI coerente.
<img src="/mia-immagine.png" onerror="this.onerror=null; this.src='fallback.png'" />
Il settaggio this.onerror=null è necessario per non incorrere in un ciclo infinito, nel caso in cui anche la fallback non sia disponibile. In tal caso non verrà mostrata alcuna immagine, dandoci sempre modo di accorgerci dell'errore.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Ottimizzazione dei block template in Angular 17
Specificare il versioning nel path degli URL in ASP.NET Web API
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
Creare moduli CSS in React
Criptare la comunicazione con mTLS in Azure Container Apps
Implementare il throttling in ASP.NET Core
Eseguire una query su SQL Azure tramite un workflow di GitHub
Utilizzare un service principal per accedere a Azure Container Registry
Semplificare il deployment di siti statici con Azure Static Web App
Ottimizzare la latenza in Blazor 8 tramite InteractiveAuto render mode
Potenziare Azure AI Search con la ricerca vettoriale
Usare il versioning con i controller di ASP.NET Core Web API
I più letti di oggi
- Una chat con ASP.NET Core e WebSockets
- Le novità di Blend e VS 2013 per XAML
- Rilasciato e disponibile al download il .NET Framework 4.5.2
- Service Pack 1 per Expression Blend
- Continuano i WebCast MSDN in Italiano
- Information Card Kits for ASP.NET and HTML
- Introduzione ad Entity Framework
- rilasciato un aggiornamento per #wp81 dev preview, disponibile direttamente dal telefono https://aspit.co/auq
- Impostare l'hostname di un'immagine docker per rendere il container da altri container in Visual Studio