Dynamic background image not working - Angular 5

Question

I am setting background image with ngStyle, like this:

<section [ngStyle]="{'background': 'url(' + backgroundUrl + ') no-repeat 0 0 / cover'}" class="slider flex-center">

In .ts file:

this.backgroundUrl = this.homeModelResponse.featuredStories[0].fullHDUrl;

The problem is, if user uploads the same images, i get url like this:

https://..something/264/2970/7745/9960/rawpixel-com-256641_(1)_org_hd_ready.jpg.jpg

with (1) in brackets, and my guess is that css doesn't work good with that, all other images are displayed but just the copies with this type of path are not.

It works with img tag but doesn't with background property in css.

Anyone knows whats wrong?

Nemanja Grabovac · Accepted Answer · 2018-07-09 11:52:54Z

1

Found the solution.

Background image does not allow (), space, single quotes and double quotes in the image path.

answered Jul 9, 2018 at 11:52

Nemanja Grabovac

8782 gold badges17 silver badges30 bronze badges

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

Comments

Krishna Rathore · Accepted Answer · 2018-07-06 09:00:42Z

0

You can add height and width of section tag.

I have create a demo on Stackblitz

<section style="height:300px;width:300px;" [ngStyle]="{'background': 'url(' + backgroundUrl + ') no-repeat 0 0 / cover'}" class="slider flex-center">

answered Jul 6, 2018 at 9:00

Krishna Rathore

9,7475 gold badges28 silver badges50 bronze badges

Collectives™ on Stack Overflow

Dynamic background image not working - Angular 5

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related