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.

Answer 1

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.