Uso de ng-src vs src

Este tutorial demuestra el uso de la directiva en ngSrclugar de src:

<ul class="phones">
    <li ng-repeat="phone in phones" class="thumbnail">
        <img ng-src="{{phone.imageUrl}}">
    </li>
</ul>

Piden:

Reemplace la directiva ng-src con un atributo src antiguo y simple.
Con herramientas como Firebug o el Inspector web de Chrome, o inspeccionando los registros de acceso del servidor web, confirme que la aplicación realmente está realizando una solicitud extraña a /app/%7B%7Bphone.imageUrl%7D%7D (o / app / {{phone .imageUrl}} ).

Lo hice y me dio el resultado correcto:

<li class="thumbnail ng-scope" ng-repeat="phone in phones">
    <img src="img/phones/motorola-xoom.0.jpg">
</li>

¿Hay alguna razón por la que?

<img ng-src="{{phone.imageUrl}}"> 

Esto le da el resultado esperado, porque phone.imageUrlse evalúa y reemplaza por su valor después de que se carga angular.

<img src="{{phone.imageUrl}}">

Pero con esto, el navegador intenta cargar una imagen nombrada {{phone.imageUrl}}, lo que resulta en una solicitud fallida. Puede comprobarlo en la consola de su navegador.

De los documentos angulares

La forma con errores de escribirlo:

<img src="http://www.gravatar.com/avatar/{{hash}}"/>

La forma correcta de escribirlo:

<img ng-src="http://www.gravatar.com/avatar/{{hash}}"/>

¿Por qué? esto se debe a que al cargar la página, antes del arranque angular y la creación de controladores, el navegador intentará cargar la imagen desde http://www.gravatar.com/avatar/{{hash}}y fallará. Luego, una vez que se inicia angular, entiende que eso {{hash}}debe reemplazarse con logo.png, por ejemplo , ahora el atributo src cambia http://www.gravatar.com/avatar/logo.pngy la imagen se carga correctamente. El problema es que hay 2 solicitudes en curso y la primera falla.

PARA resolver esto, debemos usar ng-srcque es una directiva angular y angular reemplazará el ng-srcvalor en el atributo src solo después de que el arranque angular y los controladores estén completamente cargados, y en ese momento {{hash}}ya se habría reemplazado con el valor de alcance correcto.

El src="{{phone.imageUrl}}"es innecesario y crea una solicitud adicional por parte del navegador. El navegador realizará al menos 2 GETsolicitudes al intentar cargar esa imagen:

1. antes de que se evalúe la expresión {{phone.imageUrl}}
2. después de evaluar la expresión img/phones/motorola-xoom.0.jpg

Siempre debe usar la ng-srcdirectiva cuando se trata de expresiones angulares. <img ng-src="{{phone.imageUrl}}">le da el resultado esperado de una sola solicitud.

En una nota al margen , lo mismo se aplica para ng-hrefque no obtenga enlaces rotos hasta que comience el primer ciclo de resumen.

Bueno, en realidad tiene 100% de sentido porque HTML se procesa secuencialmente y cuando esta página HTML se procesa línea por línea, cuando llega a esta imagen, la línea y procesa la imagen, nuestro phone.imageUrlaún no está definido.

Y de hecho, Angular JS aún no ha procesado este fragmento de HTML, y aún no ha buscado estos marcadores de posición ni ha sustituido estas expresiones por los valores. Entonces, lo que termina sucediendo es que el navegador obtiene esta línea e intenta buscar esta imagen en esta URL.

Y, por supuesto, esta es una URL falsa, si todavía tiene esos bigotes y llaves y, por lo tanto, le da un 404, pero una vez que Angular se encarga de esto, sustituye esta URL por la correcta, y luego todavía vemos la imagen, pero el mensaje de error 404 permanece en nuestra consola.

Entonces, ¿cómo podemos solucionar esto? Bueno, no podemos encargarnos de esto usando trucos HTML habituales. Pero podemos encargarnos de ello usando Angular. Necesitamos decirle al navegador de alguna manera que no intente buscar esta URL, pero que al mismo tiempo la obtenga solo cuando Angular esté listo para la interpretación de estos marcadores de posición.

Bueno, una forma de hacerlo es poner un atributo Angular aquí en lugar del HTML estándar. Y el atributo Angular es solo ng-src. Entonces, si decimos eso ahora, regrese, verá que ya no hay errores porque la imagen solo se obtuvo una vez que Angular obtuvo este HTML y tradujo todas las expresiones a sus valores.