Understanding a localhost Image loading error in Angular JS

Question

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 ang         


        

Answer 1

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.

Answer 2

This error happens when you use img with src attribute instead of ngSrc. You should use this notation:

<img ng-src="CurrentPage.img" alt="" />

The problem is that when you use src="{{CurrentPage.img}}" syntax, browser starts downloading a resource making an HTTP request before Angular resolves binding and replace {{CurrentPage.img}} with actual image path:

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

(urlencoded {{CurrentPage.img}}). Obviously it will result in a 404 error.

On the other hand, ng-src attribute doesn't mean anything to browser so it won't do anything, until Angular is ready and ngSrc directive creates src attribute with proper URL.