current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

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?

share|improve this question

2 Answers 2

up vote 2 down vote accepted

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.

share|improve this answer
    
That solve my problem but i guess you knew the answer from first line of my error report. How the rest lines of error report can help me in error find? –  Gonchar Denys yesterday
    
@GoncharDenys Do you still have this problem when you use ngSrc? –  dfsq yesterday
    
the rest of the lines specify where the stack trace thrown by the error. It lets you track-down the path your application took to get there so you can begin to debug the issue. Since this issue in in the core of angular, its not particularly helpful, but if an error was thrown by a method in one of your controllers, the stack trace would easily lead you there. –  agconti yesterday
    
ok thank you alot –  Gonchar Denys yesterday
    
@GoncharDenys do you mean do I use ng-src? if so then yes. –  agconti yesterday
up vote 1 down vote

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

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

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.