====== 4.2 ng-src ======
La diectiva ''ng-src'' cumple una función similar a ''ng-bind''.
Si mostramos en una página una imagen en la que parte de la URL es una expresión de AngularJS mediante ""%%{{ %%}}"" ¿qué ocurre hasta que se carga AngularJS?
Resulta que el propio navegador intentará cargar una URL de una imagen que contendrá ""%%{{ %%}}"" y obviamente no la encontrará, mostrando el típico dibujito de que no ha encontrado la imagen, aunque una vez cargado AngularJS se cargará la imagen correcta.
Veamos un ejemplo:
![]()
* Linea 9: Al usar el atributo ''src'' se verá el icono de que no ha cargado la imagen aunque luego ya aparece la imagen correcta.
* Línea 10: Usando la directiva ''ng-src'' no se ve nada hasta que no se carga la imagen correcta.
* Linea 12: Cargamos el fichero "script.js" para que se vea mejor que aún no se ha cargado la imagen ya que primero se cargarán las imágenes y luego se cargará este script.
var app = angular.module("app", []);
alert("Parando la aplicación para que se vea el icono de que no se ha podido cargar la imagen")
app.controller("PruebaController", function($scope) {
$scope.fileName = "dokuwiki-128.png";
});
* Linea 3: Ponemos un mensaje para que podamos ver cómo se ve el icono de que no hay imagen.
* Línea 6: Ponemos en el ''$scope'' el nombre del fichero a cargar.
{{url>http://embed.plnkr.co/vNsiRbD8VgV0BV8wjMJs}}
====== Referencias ======
* [[https://docs.angularjs.org/api/ng/directive/ngSrc|ng-src]]