angularjs - property - Uso de ng-src vs src

ng-src angular 5

Question

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

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

Piden que:

Reemplace la directiva ng-src con un atributo src antiguo simple.
Utilizando herramientas como Firebug o el Inspector web de Chrome, o inspeccionando los registros de acceso del servidor web, confirme que la aplicación está haciendo 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 qué?

Answer 1

Bueno, en realidad tiene 100% de sentido porque el 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 aú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 y sustituye estas expresiones con 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 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 ocuparnos de esto? Bueno, no podemos ocuparnos de esto usando trucos HTML habituales. Pero podemos cuidarlo usando Angular. De alguna manera, debemos decirle al navegador que no intente obtener esta URL, pero al mismo tiempo, solo la busque 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 recuperó una vez que Angular obtuvo este HTML y tradujo todas las expresiones a sus valores.

Answer 2

De documentos angulares

La forma defectuosa 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 {{hash}} tiene que ser reemplazado con say 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, deberíamos usar ng-src que es una directiva angular y angular reemplazará el valor ng-src en el atributo src solo después de que el bootstrapping angular y los controladores estén completamente cargados, y en ese momento {{hash}} ya habría sido reemplazado por valor de alcance correcto.

Answer 3

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

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

Siempre debe usar la directiva ng-src cuando trabaje con expresiones angulares. <img ng-src="{{phone.imageUrl}}"> le brinda el resultado esperado de una sola solicitud.

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

Answer 4

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

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

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

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