Uso de ng-src vs src

Este tutorial demuestra el uso de la directiva ngSrc lugar de src :

 

Ellos piden:

Reemplace la directiva ng-src con un viejo atributo simple src.
Utilizando herramientas como Firebug o Chrome’s Web Inspector, o inspeccionando los registros de acceso del servidor web, confirme que la aplicación está haciendo una solicitud externa a /app/%7B%7Bphone.imageUrl%7D%7D (o / app / {{phone .imageUrl}} ).

Lo hice y me dio el resultado correcto:

 
  • ¿Hay alguna razón por qué?

      

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

      

    Pero con esto, el navegador intenta cargar una imagen llamada https://stackoverflow.com/questions/27554765/use-of-ng-src-vs-src/{{phone.imageUrl}} , que da como resultado una solicitud fallida. Puede verificar esto en la consola de su navegador.

    De documentos angulares

    La forma incorrecta de escribirlo:

    La forma correcta de escribirlo:

    ¿Por qué? esto se debe a que al cargar la página, antes de la inicialización 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 {{hash}} tiene que reemplazarse con decir logo.png , ahora el atributo src cambia a http://www.gravatar.com/avatar/logo.png y la imagen se carga correctamente. El problema es que hay 2 solicitudes en curso y la primera falla.

    Para resolver esto debemos usar ng-src que es una directiva angular y angular reemplazará el valor de ng-src 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 habría sido reemplazado por corregir el valor del scope

    El src="http://sofes.miximages.com/angularjs/{{phone.imageUrl}}" es necesario y crea una solicitud adicional por parte del navegador. El navegador hará al menos 2 solicitudes GET que intenten cargar esa imagen:

    1. antes de que se evalúe la expresión https://stackoverflow.com/questions/27554765/use-of-ng-src-vs-src/{{phone.imageUrl}}
    2. después de que se evalúa la expresión img/phones/motorola-xoom.0.jpg

    Siempre debe usar la directiva ng-src cuando trate con expresiones angulares. le proporciona el resultado esperado de una única solicitud.


    En una nota al margen , lo mismo se aplica a ng-href por lo que no obtendrás enlaces rotos hasta que comience el primer ciclo de digestión.

    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, para cuando llega a esta imagen, la línea y el procesamiento de la imagen, nuestro phone.imageUrl todavía 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 y sustituye estas expresiones por los valores. Entonces, lo que termina sucediendo es que el navegador obtiene esta línea e intenta obtener 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 encargue de esto, sustituye esta URL por la adecuada, y luego aún vemos la imagen, pero el mensaje de error 404 permanece en nuestra consola.

    Entonces, ¿cómo podemos ocuparnos de esto? Bueno, no podemos ocuparnos de esto usando trucos regulares de HTML. Pero podemos ocuparnos de eso usando Angular. Necesitamos de alguna manera decirle al navegador que no intente buscar esta URL, sino que al mismo tiempo la busque solo cuando Angular esté lista 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 que ahora, vuelve, verás que ya no hay errores porque la imagen solo fue captada una vez que Angular obtuvo este HTML y tradujo todas las expresiones a sus valores.