0

ジェイドのマークアップは次のようになっています。

li(ng-repeat="parcel in parcels | filter : filterActiveAreaParcels")
  .parcel-image(style="background-image:url({{parcel.image}});")

何らかの理由で、取得しようとしているときに404エラーがhttp://localhost:3501/%7B%7Bparcel.image%7D%7D発生することがあります。常に発生するわけではありませんが、時々発生します。すべての画像が取得され、ページに正しく表示されていますが。ここで何が問題になる可能性がありますか？

4

1 に答える 1

1

http://localhost:3501/%7B%7Bparcel.image%7D%7Dはhttp://localhost:3501/{{parcel.image}}

angular が HTML をコンパイルするとき、HTML は実際には DOM にあることに注意してください。したがって、ブラウザは（アプリがブートストラップする前の短い間）、DOM に次のようなものがあります。

<div class="parcel-image" style="background-image:url({{parcel.image}})">...</div>

スタイル プロパティが表示されると、サーバーに/{{parcel.image}}.

そのため、時折 404 が発生します。

編集: ngStyle ディレクティブを使用してこれを回避できます:

ngStyleディレクティブはオブジェクトを監視し、それに含まれるスタイルを適用します。

だからあなたのhtmlで：

<div class="parcel-image" ng-style="styles">...</div>

そしてあなたのコントローラーで：

app.controller('ParcelImageController', function($scope) {
  $scope.parcel = {/*some object*/};
  $scope.style = {
    'background-image': 'url(' + $scope.parcel.image + ')'
  };
});

ここでは、実際の例をフィドルします。

于 2013-02-15T17:43:41.637 に答える