Gonchar Denys Gonchar Denys - 2 months ago 27
AngularJS Question

Understanding a localhost Image loading error in Angular JS

How can I find the error of the following error report?

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


The
%7B%7BCurrentPage.img%7D%7D
is a
{{CurrentPage.img}}
, which returns the image name and is working, why is this error in my console?

Answer

To break your error down:

%7B%7BCurrentPage.img%7D%7D

Your image source is url encoded, where:

%7B%7B is {{

and

%7D%7D is }}

Once the page loads your browser tries to get the image specified by

<img src="{{CurrentPage.img}}">

but angular hasn't had a chance yet to evaluate the expression. The broswer then tries get the image specified by the raw text "{{CurrentPage.img}}" and encodes it so you get:

<img src="%7B%7BCurrentPage.img%7D%7D">

And are unable to get an image specified by that url:

http://localhost:8080/%7B%7BCurrentPage.img%7D%7D

Because nothing exists there. To get around this use ng-src:

<img ng-src="{{CurrentPage.img}}">

That prevents the browser from loading the image before its properly evaluated by angular.