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
Creare un'applicazione React e configurare Tailwind CSS
Migliorare la sicurezza dei prompt con Azure AI Studio
Utilizzare politiche di resiliency con Azure Container App
Eseguire query per recuperare il padre di un record che sfrutta il tipo HierarchyID in Entity Framework
Utilizzare un numero per gestire la concorrenza ottimistica con SQL Server ed Entity Framework
Ottenere un token di accesso per una GitHub App
Evitare (o ridurre) il repo-jacking sulle GitHub Actions
Creare un webhook in Azure DevOps
Evitare il flickering dei componenti nel prerender di Blazor 8
Inference di dati strutturati da testo con Semantic Kernel e ASP.NET Core Web API
Eseguire una GroupBy per entity in Entity Framework
Inizializzare i container in Azure Container Apps