动态背景图像与Angular JS ng-repeat

Question

我想使用angular的ng-repeat指令显示动态背景图像。

目前，我通过将其设置为内联样式来实现此目的：

<div ng-repeat="thing in things" 
     style="background-image: url({{thing.image}})" >
</div

我更愿意使用标准角度工具来完成此操作并避免使用内联样式。我会使用ng-style设置静态背景图像，但这对于不确定数量的对象似乎不实用。

对于这样的事情，正确的解决方案是什么？

Answer 1

您可以将其用于<img>标签，如下所示

<img ng-repeat="x in array" src="{{ x.image_url }}" style="static inline stylesheet" />

或使用

<img ng-repeat="x in array" ng-src="x.image_url" style="static inline stylesheet" />

Answer 2

要动态设置图像，建议使用ng-src

<div ng-repeat="thing in things">
     <img ng-src="{{thing.ImageUrl}}" />
</div

这会给你预期的结果，因为在加载角度之后，会对thing.ImageUrl进行求值并用其值替换。

立即更新为背景图片

<div ng-repeat="thing in things" ng-style="{'background-image': 'url(' + thing.ImageUrl + ')'}"></div