Angular.js imgタグで404エラー srcにmodelの値をセット

$scope.user.image = "http://hoge.com/hoge.png" 

スコープのユーザーモデルに画像のURLの設定し、imgタグのsrcに設定する。

<img src="{{user.image}}" />

これだとsrcにURLがセットされる前に、ブラウザが画像を読み込みはじめて、

http://hoge.com/{{user.image}} というURLで読み込んで404エラーになる

 

そんなときは、「ng-src」を使えばエラーにならない

<img ng-src="{{user.image}}" >