imgタグのsrcに$scopeのURLを使いたいのに404がでてくるから対処 – AngularJS

[PR]

AngularJSの基本的なお作法の1つ。
いい感じにimgタグのsrc属性を設定したい。

imgタグで画像を表示するときに、おもむろに

<img class="thumbnail" src="{{post.thumbnail_url}}" />

って書くと、

Failed to load resource: the server responded with a status of 404 (Not Found) 
http://XXXX.com/%7B%7Bpost.thumbnail_url%7D%7D

っていうエラーが表示されます。

AngularJSが走る前にHTML単体でsrcを取得にいって、その後補完されてるっぽいです。
なので、srcの前にng-をつけて

<img class="thumbnail" ng-src="{{post.thumbnail_url}}" />

ってやれば、404エラーなく、AngularJSのタイミングで画像を取得に行ってくれます。

公式
http://docs.angularjs.org/api/ng/directive/ngSrc