Problemas con las imagenes en angular. %7B%7B %7D%7D

Si desarrollamos una aplicación con angular e intentamos insertar dinámicamente imágenes en una etiqueta <img src="{{ ruta_dinamica_de_la_imagen }}" podemos encontrarnos errores de redsimilar a la imagen de abajo. (Developer Tool de chrome)

Estos errores producen demoras de tiempo en nuestras peticiones, ralentizando nuestras aplicaciones. Esto se debe a que la etiqueta src no soporta los caracteres {{ }} que necesitamos para definir la variable de angular. La representacion hexadecimal de los caracteres {{ }} se traducen en %7B%7B %7D%7D produciendo el error en cuestión. 

Solución: Para solucionarlo, basta con cambiar la etiqueta <img src .. por <img ng-src .. esta directiva de angular evitará nuestro problema. Mas abajo se completa la información con documentación oficial extraida de Angular Js. 

Nota: análogamente podemos encontrar el problema con la etiqueta HREF y la solución es usar la directiva <a ng-href="{{ ruta_dinamica_angular }}"

Información extraida de la documentacion oficial de angular JS,

https://docs.angularjs.org/api/ng/directive/ngSrc

ngSrc

1. - directive in module ng

Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrcdirective solves this problem.

The buggy way to write it:

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

The correct way to write it:

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

Directive Info

• This directive executes at priority level 99.

Usage

• as attribute:

  <IMG
    ng-src="">
  ...
  </IMG>

Arguments

Param	Type	Details
ngSrc	template	any string which can contain {{}} markup.