angularjs - submitted - Comprensión de un error de carga de imagen localhost en Angular JS
angularjs validators (2)
¿Cómo puedo encontrar el error del siguiente informe de error?
GET http://localhost:8080/img/%7B%7BCurrentPage.img%7D%7D 404 (Not Found) angular.js:2763
r.html angular.js:2763
S.(anonymous function) angular.js:2810
(anonymous function) angular-ui-router.min.js:7
N angular.js:6711
g angular.js:6105
(anonymous function) angular.js:6001
j angular-ui-router.min.js:7
(anonymous function) angular-ui-router.min.js:7
k.$broadcast angular.js:12981
u.transition.L.then.u.transition.u.transition angular-ui-router.min.js:7
F angular.js:11573
(anonymous function) angular.js:11659
k.$eval angular.js:12702
k.$digest angular.js:12514
k.$apply angular.js:12806
h angular.js:8379
u angular.js:8593
z.onreadystatechange angular.js:8532
El %7B%7BCurrentPage.img%7D%7D
es un {{CurrentPage.img}}
, que devuelve el nombre de la imagen y está funcionando. ¿Por qué aparece este error en mi consola?
Este error ocurre cuando usa img
con el atributo src
lugar de ng-src . Deberías usar esta notación:
<img ng-src="CurrentPage.img" alt="" />
El problema es que cuando usa la sintaxis src="{{CurrentPage.img}}"
, el navegador comienza a descargar un recurso haciendo una solicitud HTTP antes de que Angular resuelva el enlace y reemplace {{CurrentPage.img}}
con la ruta de la imagen real:
http://localhost:8080/img/%7B%7BCurrentPage.img%7D%7D
(urlencoded {{CurrentPage.img}}
). Obviamente se traducirá en un error 404.
Por otro lado, el atributo ng-src
no significa nada para el navegador, por lo que no hará nada, hasta que Angular esté listo y la directiva ng-src cree el atributo src
con la URL adecuada.
Para romper su error:
%7B%7BCurrentPage.img%7D%7D
Su fuente de imagen es url codificada, donde:
%7B%7B is {{
y
%7D%7D is }}
Una vez que la página se carga, su navegador intenta obtener la imagen especificada por
<img src="{{CurrentPage.img}}">
Pero angular aún no ha tenido la oportunidad de evaluar la expresión. El broswer luego intenta obtener la imagen especificada por el texto en bruto "{{CurrentPage.img}}"
y la codifica para que usted obtenga:
<img src="%7B%7BCurrentPage.img%7D%7D">
Y no pueden obtener una imagen especificada por esa url:
http://localhost:8080/%7B%7BCurrentPage.img%7D%7D
Porque nada existe allí. Para evitar este uso ng-src :
<img ng-src="{{CurrentPage.img}}">
Eso evita que el navegador cargue la imagen antes de que se evalúe correctamente por angular.