0

我的 Jade 标记看起来像这样：

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 时，它实际上是在 DOM 中。因此，您的浏览器（在应用程序启动之前的一小段时间）在 DOM 中有类似这样的内容：

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

当它看到 style 属性时，它会使用/{{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 回答