[解決済み] ng-srcとsrcの使い分け

質問

これは チュートリアル ディレクティブの使用法を説明します。 ngSrc の代わりに src :

<ul class="phones">
    <li ng-repeat="phone in phones" class="thumbnail">
        <img ng-src="{{phone.imageUrl}}">
    </li>
</ul>

と聞かれる。

ng-srcディレクティブを普通のsrc属性に置き換えてください。

Firebug や Chrome の Web Inspector などのツールを使用するか、Web サーバーのアクセス ログを確認してください。 ウェブ サーバーのアクセス ログを検査し、アプリが実際に に余計なリクエストをしていることを確認します。 /app/%7B%7Bphone.imageUrl%7D%7D に余計なリクエストをしていることを確認します。 (または /app/{{phone.imageUrl}}となります。 ).

そうしたら、正しい結果が出ました。

<li class="thumbnail ng-scope" ng-repeat="phone in phones">
    <img src="img/phones/motorola-xoom.0.jpg">
</li>

何か理由があるのでしょうか？

どのように解決するのですか？

<img ng-src="{{phone.imageUrl}}"> 

これは期待通りの結果をもたらします。 phone.imageUrl は評価され、angularがロードされた後にその値で置き換えられるからです。

<img src="{{phone.imageUrl}}">

しかし、これではブラウザは {{phone.imageUrl}} という画像を読み込もうとして、リクエストに失敗しています。 これはブラウザのコンソールで確認することができます。