Here is my css file and I'm trying to do like this :

.login-wrapper {
  background-image: url({{imagePath}});
}

My component:

export class LoginComponent implements OnInit {
  imagePath: any = 'assets/discord-logo.png';

  constructor() {}

  ngOnInit() {}
}

It doesn't work.

How can I do to inject the 'imagePath' from my component to the css file ?

Thanks for any help

CodePudding user response：

you can apply inline css in html file like this:

<div class="div"  [style.backgroundImage]="'url(' imageUrl ')'">
</div>

demo link:https://stackblitz.com/edit/angular-ivy-1rf1tl?file=src/app/app.component.html

CodePudding user response：

You can use ngStyle to add the background image in HTML file like this:

<div [ngStyle]="{'background-image': 'url(&quot;'   imagePath   '&quot;)'}" > </div>