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:

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
  </head>

  <body ng-controller="PruebaController">
    <img src="http://www.cursoangularjs.es/lib/tpl/dokubook/images/{{fileName}}" >
    <img ng-src="http://www.cursoangularjs.es/lib/tpl/dokubook/images/{{fileName}}" >
    
    <script src="script.js"></script>    
  </body>

</html>

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.

Referencias

ng-src