Dynamic Background Image With Angular Js Ng-repeat

Id like to display dynamic background images using angular's ng-repeat directive. At the moment Im doing this by setting it as an inline style like so:

Copy

This would then give you expected result, because thing.ImageUrl is evaluated and replaced by its value after angular is loaded.

Update as a background Image now

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

Solution 2:

you can use it into <img> tags like below

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

or use

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

Share