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 la script injection nelle GitHub Actions
Sfruttare lo stream rendering per le pagine statiche di Blazor 8
Paginare i risultati con QuickGrid in Blazor
Utilizzare il trigger SQL con le Azure Function
Creazione di plugin per Tailwind CSS: espandere le funzionalità del framework dinamicamente
Visualizzare le change sul plan di Terraform tramite le GitHub Actions
Garantire la provenienza e l'integrità degli artefatti prodotti su GitHub
Ottimizzare il mapping di liste di tipi semplici con Entity Framework Core
Sviluppare un'interfaccia utente in React con Tailwind CSS e Preline UI
Persistere la ChatHistory di Semantic Kernel in ASP.NET Core Web API per GPT
Filtrare i dati di una QuickGrid in Blazor con una drop down list
Effettuare il refresh dei dati di una QuickGrid di Blazor