[解決済み] AngularJSによる画像取得リクエスト

質問

HTMLに表示する画像のソース文字列をAngularJSのコントローラに保存していますが、Angularコントローラが初期化される前に404が出力されます。

以下がそのHTMLです。

 <div ng-controller="Cont">
      <img src="{{imageSource}}">
 </div>

Angularのコントローラです。

 var Cont = function($scope) {
      $scope.imageSource = '/tests.png';
 }

そして、表示されるエラー( %7D%7D に対応する {{ に対応します)。

 GET https://localhost:9000/%7B%7BimageSource%7D%7D 404 (Not Found) 

どうすればこれを防ぐことができるでしょうか？つまり、Angularコントローラが初期化されたときだけ画像を読み込むようにすればよいのでしょうか？

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

srcをng-srcに置き換えてみてください。 ドキュメントを参照してください。 :

src属性で{{hash}}のようなAngularのマークアップを使うとうまくいかない のようになります。ブラウザはURLからリテラルテキストでフェッチします。 {ブラウザは、Angularが{{hash}}内の式を置き換えるまで、リテラルテキストでURLから取得します。この問題を解決するために ngSrcディレクティブがこの問題を解決してくれます。

 <div ng-controller="Cont">
      <img ng-src="{{imageSource}}">
 </div>