angular.jsで出力前に読み込めなかった画像を再読み込みするには

Question

###前提・実現したいこと

Monaca でアプリを作成しております。
DBから画像のURLを読み込んで、<img>タグに出力して画像表示を行おうとしております。

###発生している問題・エラーメッセージ

タイミングによっては<img>タグの出力及びページ描画の完了が画像の読み込みより早くなってしまい、画像の箇所が白いまま出力されません。
なお、画面を切り替えて戻ってきたりすると再度描画が行われ画像が表示されます。

###ソースコード

<ons-list> <ons-list-item class="articleList list-item-container" ng-repeat="article in articles | orderBy:'-date' | filter:search"> <div> <ons-row> <ons-col><img src="{{::article.imageUrl}}" alt="Image"></ons-col> </ons-row> </div> </ons-list-item> </ons-list>

###補足情報(言語/FW/ツール等のバージョンなど)

{{::article.imageUrl}}
で画像のURLが出力されております。

画像が読み込みがされていない場合は
1.alt の値が表示されます。
2.onerror が動作します。

上記のパターンで画像の読み込みが間に合っていない場合には再度描画するとするにはどのようにコーディングすればよいでしょうか？

お手数ですが、よろしくお願い致します。

Answer 1

<img src>ではなく、

<img src="{{::article.imageUrl}}" alt="Image">

<img ng-src>を使う。

<img ng-src="{{::article.imageUrl}}" alt="Image">

ngSrc | AngularJS 1.2 日本語リファレンス | js STUDIO

Comments

[kutu]

実は上記の設定は行ったのですが
表示がされない時があります。