Setting up background img with angular 7

Question

I have a problem with displaying background img in angular. I am using function with ngStyle in html tag and it works fine, but when i upload whole project on github pages imgs with this method doesn't show up. Other images that i add with img tag works fine. Could help me fix it ?

Code:

getHeaderBackgroundImg() {
    return `url(/assets/images/4.jpg)`
  }

<header [ngStyle]="{'background-image': getHeaderBackgroundImg(), 'background-position' : 'center', 'height' : '950px', 'width' : '100%'}" class="main__container"></header>

Abderrahim Soubai-Elidrisi · Accepted Answer · 2019-06-21 14:23:23Z

1

remove / from the beginning of your path (relativity)

getDescriptionBackgroundImg() {
    return `url(assets/images/4.jpg)`
  }

answered Jun 21, 2019 at 14:23

Abderrahim Soubai-Elidrisi

5,2621 gold badge31 silver badges41 bronze badges

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

1 Comment

Ludar0 Over a year ago

Just pushed this changes on git and still have same problem.

Hamza Neffati · Accepted Answer · 2019-06-21 14:53:21Z

0

Try this :

getDescriptionBackgroundImg() {
    return `url(assets/images/4.jpg)`
  }

<header [ngStyle]="{'background-image': getDescriptionBackgroundImg(), 'background-position' : 'center', 'height' : '950px', 'width' : '100%'}" class="main__container"></header>

edited Jun 21, 2019 at 14:53

answered Jun 21, 2019 at 14:34

Hamza Neffati

1651 silver badge11 bronze badges

1 Comment

Ludar0 Over a year ago

It was just a type mistake

Collectives™ on Stack Overflow

Setting up background img with angular 7

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related