Corsi on-line

AngularJS: aggiungere immagini tramite ng-src

La direttiva ng-src del framework AngularJS può essere utilizzata per aggiungere un’immagine attraverso una valutazione dell’attributo src di HTML, il costrutto che viene comunemente utilizzato all’interno del markup di una pagina Web per indicare l’URL associato ad un elemento grafico da includere tra i contenuti. ng-src opera una verifica sull’immagine controllando che quest’ultima non venga visualizzata in modo errato prima della valutazione del codice che la richiama.

A livello sintattico ng-src determina l’override, in sostanza la sovrascrittura, dell’attributo src utilizzato per l’elemento img; essa dovrebbe essere utilizzata in sostituzione di src se all’interno del valore passato all’attributo è presente del codice basato su AngularJS. A tal proposito è possibile proporre un semplice esempio come quello esposto di seguito:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<body ng-app="">
<div ng-init="imgVar = 'http://blog.mrwebmaster.it/wp-content/themes/mrwblog/images/logo_blog.png'">
<h1>Il logo del nostro blog</h1>
<img ng-src="{{imgVar}}">
</div>
</body>
</html>

Si noti come l’URL dell’immagine sia stato assegnato ad una variabile in corrispondenza con la fase di inizializzazione dei dati determinata dalla direttiva ng-init; questa variabile è stata poi passata come argomento a ng-src (utilizzato per img al posto di src) adottando la sintassi {{imgVar}}. Eseguendo la piccola applicazione proposta verrà generato un output come il seguente:

Cattura

Chiaramente l’applicazione d’esempio sarebbe potuta basarsi sull’utilizzo del tradizionale attributo src, ma dato che parliamo di una soluzione scritta con AngularJS sarà buona norma fare ricorso ad una direttiva specifica. ng-src accetterà un solo parametro, cioè una stringa ({{hash}}) che fungerà da template per l’immagine da richiamare.

L’{{hash}} non dovrà rappresentare necessariamente un intero URL ma anche una porzione di esso come per esempio la sua parte finale, quella relativa all’immagine da includere nella pagina:

<img ng-src="http://blog.mrwebmaster.it/wp-content/themes/mrwblog/images/{{hash}}" alt="Il logo del nostro blog" />
Post correlati
I più letti del mese
Tematiche