angularjs プロジェクトにローカルの jpg ファイルをロードできません

Question

yeoman のジェネレーター angular を使用して、小さな angularjs アプリ プロジェクトを開始しました。

jpg ファイルを app/images フォルダーに追加し、これらの jpg ファイルのいずれかにリンクするタグを使用しようとすると、ブラウザーに表示されません。

png ファイルを使用する場合は、すべて問題ありません (同じ絶対パス /images/image.png と /images/image.jpg を使用します)。jpg ファイルへのリモート URL を使用すると、すべて正常に動作します。

ここで何が欠けているのでしょうか？タグを使用しても同じ問題が発生します。ローカルの絶対パスを使用すると機能しませんが、リモート URL を使用するとすべて問題ありません。

お時間を割いてご協力いただき、誠にありがとうございました。

Answer 1

HTML5MODEを使用していますか？もしそうなら、connect-modrewriteを使用してURLをindex.htmlに書き換える場合は、JPGファイルとJPEGファイルを除外してください。私は最近同じ問題に遭遇し、私の書き換え規則はPNG画像を除外したがJPEGではなかったことを認識していなかった。

Answer 2

角度式を使用する必要があります {{}} のために ng-src 働くこと。

たとえば、次の HTML マークアップを使用します。

<div ng-controller="MyCtrl">
  <img ng-src="{{ path }}" />
</div>

次のようなコントローラーを使用します。

function MyCtrl($scope) {
    $scope.path = 'https://si0.twimg.com/profile_images/';
};

これにより、angular がロードされ、その魔法が実行され、から画像ソースを正しく参照できるようになります。 path 保持される変数 $scope コントローラーから。

それ以外の場合、画像は src 属性には値を取得する時間がまだありません。

プランカーでのデモ: http://plnkr.co/edit/6jMDp96we0S7DGyGTtxw?p=preview