Dynamic background image with Angular JS ng-repeat

Question

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:

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

I would prefer to use standard angular tools to accomplish this and avoid using inline styles. I would set a static background image using ng-style but this does not seem practical for an indeterminate number of objects.

What is the correct solution for something like this?

checkout stackoverflow.com/questions/24899699/… it has a multitude of ways to do it. I'm sure one of these ways is what you are looking for. — Naren Murali
– Naren Murali, Commented Aug 10, 2017 at 18:35
i think with your ng-style is good some thing like this <div ng-repeat="thing in things" ng-style="{'background-image':'url(thing.image)'}" > </div — Jesus Carrasco
– Jesus Carrasco, Commented Aug 10, 2017 at 18:50

V31 · Accepted Answer · 2017-08-10 18:55:08Z

2

To set an image dynamically, suggest to use ng-src

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

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

edited Aug 10, 2017 at 18:55

answered Aug 10, 2017 at 18:40

V31

7,6643 gold badges28 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jesus Carrasco Over a year ago

but that make an img element. no background image in the div.

V31 Over a year ago

thats an example let me put a background image style in the div in an edit

I don't know · Accepted Answer · 2017-08-14 09:31:14Z

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" />

edited Aug 14, 2017 at 9:31

I don't know

8012 gold badges9 silver badges17 bronze badges

answered Aug 10, 2017 at 18:33

Code Kadiya

3851 silver badge14 bronze badges

Collectives™ on Stack Overflow

Dynamic background image with Angular JS ng-repeat

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related