Quando dobbiamo mostrare un'immagine, spesso capita che dobbiamo deciderne l'url da codice. In questi casi possiamo mettere in binding la proprietà src del tag image con una proprietà dello scope.
<img src="{{imageUrl}}" alt="image"/>
Sebbene funzioni, questo approccio presenta un problema: quando il browser parsa il codice HTML effettua una richiesta all'url "{{imageUrl}}" andando ovviamente in errore. Quando poi il motore di binding di AngularJS trasforma l'espressione di binding nell'url reale dell'immagine allora viene nuovamente effettuata una richiesta per l'immagine.
Per evitare la doppia richiesta, possiamo utilizzare la direttiva ngSrc che effettua la chiamata per scaricare l'immagine solo dopo che il motore di binding ha impostato l'url reale.
<img ng-src="{{imageUrl}}" alt="image"/>
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Evitare (o ridurre) il repo-jacking sulle GitHub Actions
Utilizzare i primary constructor di C# per inizializzare le proprietà
Creare moduli CSS in React
Effettuare il binding di date in Blazor
Trasformare qualsiasi backend in un servizio GraphQL con Azure API Management
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
Ottimizzare la latenza in Blazor 8 tramite InteractiveAuto render mode
Utilizzare HiLo per ottimizzare le insert in un database con Entity Framework
Creare form tipizzati con Angular
Implementare l'infinite scroll con QuickGrid in Blazor Server
Generare file per il download da Blazor WebAssembly
Eseguire una GroupBy per entity in Entity Framework
I più letti di oggi
- Miglioramenti nelle performance di Angular 16
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- HTML5 con CSS e JavaScript
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Ottimizzazione dei block template in Angular 17
- Disabilitare automaticamente un workflow di GitHub (parte 2)