AngularJS error when displaying images?

Question

I am filling in <img src= tags using AngularJS, so urls in my html are:

<img src='[[profile.image]]'>

When I load the page the image shows but the get errors in the Javascript console too:

GET [[profile.image]] 404 (NOT FOUND)

So the browser is trying to fetch the image before Angular has interpolated the value right? Then when Angular sets the value the browser fetches again and this time shows the image.

How can I either get Angular to do this earlier, or get the browser to wait? I don't like having the error exposed.

possible duplicate of Image Get Requests with AngularJS

Mark Rajcok
– Mark Rajcok

2013-01-26 18:12:59 +00:00
Commented Jan 26, 2013 at 18:12 — Mark Rajcok
– Mark Rajcok, Commented Jan 26, 2013 at 18:12

Josh David Miller · Accepted Answer · 2013-01-26 17:41:16Z

27

Angular has a special directive just for this case: http://docs.angularjs.org/api/ng.directive:ngSrc

<img ng-src="{{profile.img}}" />

answered Jan 26, 2013 at 17:41

Josh David Miller

121k16 gold badges129 silver badges95 bronze badges

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

1 Comment

Ataur Rahim Chowdhury Over a year ago

angularjs is awesome. :)

Collectives™ on Stack Overflow

AngularJS error when displaying images?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related