角度とhtml - リソースの読み込みに失敗しました

Question

私はAngularJSを使用してデータを表示し、ユーザの選択に基づいて画像を表示するページがあります。

サイトは動作しますが、コンソールに、私はこの問題を持っている：

Failed to load resource: the server responded with a status of 404 (Not Found) http://mysite.app/images/places/undefined 

これはhtmlです：

<img width="100%" height="100%" ng-src="@{{ selectedEvent.place.image | addFullPathToImage }}" alt="@{{ selectedEvent.place.name }}"> 

、これは角度コードです：

app.filter('addFullPathToImage', function() { 
    return function (text) { 
     return mysite.paths.placesPath + "/" + text; 
    } 
}); 

イメージは動作しますが、どうすればコンソールエラーを取り除くことができますか？

Answer 1

明らかにselectedEvent.place.imageは最初のダイジェストサイクルでは未定義に解決されます。このダイジェストサイクルでは404が表示され、その後実際の値が設定され、別のダイジェストサイクルが表示されます。

これは2つの異なるサイクルで行われた理由を理解するためにコードを調べることができます。 selectedEvent.place.imageを設定する前に、サーバーコールなどの非同期操作を使用していますか？

すぐに回避できるのは、その値がスコープ内で設定された後で、イメージをHTMLに配置することです。

<img 
    ng-if = "selectedEvent.place.image" 
    width = "100%" 
    height = "100%" 
    ng-src = "@{{ selectedEvent.place.image | addFullPathToImage }}" 
    alt = "@{{ selectedEvent.place.name }}" 
> 

PS：あなたはこのようなng-ifを追加することが必要であることを行うためにwidthとheight属性は非常に廃止され、代わりにstyle属性または個別のCSSを使用してみてください。