validators submitted setvalidity errors error custom angularjs image error-handling

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.