AngularJS: prevent a 404 error in img src attribute

Question

I want to load the thumbnail of video

<img src="http://www.dailymotion.com/thumbnail/video/{{video.id}}">

But until AngularJS is loaded, I get a 404 error

GET http://www.dailymotion.com/thumbnail/video/%7B%7Bvideo.id%7D%7D 404 (Not Found)

It's not a big deal, but I would like to solve it.

Eduard Gamonal · Accepted Answer · 2013-07-03 13:32:03Z

36

You should be using ng-src or the image url will be resolved literally. a video like http://www.dailymotion.com/thumbnail/video/4 does exist, but not the literal string http://www.dailymotion.com/thumbnail/video/{{video.id}}

I made a jsfiddle demonstrating the img ng-src behaviour. You can see with the network tab in Firebug that you don't get a 404 error.

edited Jul 3, 2013 at 13:32

answered Jul 3, 2013 at 13:19

Eduard Gamonal

8,0315 gold badges44 silver badges48 bronze badges

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

1 Comment

JMaylin Over a year ago

Thanks a lot, I didn't know ng-src.

Collectives™ on Stack Overflow

AngularJS: prevent a 404 error in img src attribute

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