Web app attempting to retrieve data before AngularJS is loaded

Question

I am adding images to divs with ng-repeat which works fine. The image location data is nested in an array. The images show up as expected. My partial looks like:

<div class="image-wrapper">
  <img src={{item.user.img_src}}>
</div>

However, it appears the page is to attempting to retrieve the string before AngularJS is loaded. I get the following console warning:

GET http://localhost:3000/%7B%7Bitem.user.img_src%7D%7D 404 (Not Found)

How do I prevent this?

Dave · Accepted Answer · 2014-02-27 16:10:35Z

5

The src attribute is buggy when Angular markup is used. Use ngSrc instead of src.

Thus, <img ng-src="{{item.user.img_src}}">

answered Feb 27, 2014 at 16:10

Dave

2113 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matt Pileggi · Accepted Answer · 2014-07-23 14:53:51Z

4

When the browser first loads the page it sees your src exactly as you wrote it. It's not until Angular loads and processes the page that it updates your dynamic source. Neither of these is what you want to have happen (especially since you could accidentally create the bad empty src attribute). Instead, use ngSrc directive so that no src will be set until Angular has evaluated your expression:

http://docs.angularjs.org/api/ng/directive/ngSrc

edited Jul 23, 2014 at 14:53

answered Feb 27, 2014 at 16:10

Matt Pileggi

7,2364 gold badges19 silver badges20 bronze badges

Collectives™ on Stack Overflow

Web app attempting to retrieve data before AngularJS is loaded

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related