CODEWITHSUNDEEP
angularjs
Evan Emolo
Evan Emolo

Reputation: 1670

Web app attempting to retrieve data before AngularJS is loaded

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?

Upvotes: 2

Views: 404

Answers (2)

Matt Pileggi
Matt Pileggi

Reputation: 7206

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

Upvotes: 4

Dave
Dave

Reputation: 211

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

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

Upvotes: 5

Related Questions