CODEWITHSUNDEEP
linuxangular
Jakub Strebeyko
Jakub Strebeyko

Reputation: 736

How to add a background image to a <div> in Angular?

I'm creating a component with a background being provided as a its attribute, like this:

<overlay-card src="https://static.pexels.com/photos/51387/mount-everest-himalayas-nuptse-lhotse-51387.jpeg" color="rgba-bluegrey-strong">

My component template:

`<div class="card card-image mb-3" style="background-image: url({{src}});"  [ngClass]="(alignment==='left')?'text-left':(alignment==='right')?'text-right':'text-center'">
      <div class="text-white d-flex py-5 px-4 {{color}}"
     >
          <ng-content></ng-content></div>
      </div>`

What I get is:

// WARNING: sanitizing unsafe style value background-image: url(https://static.pexels.com/photos/51387/mount-everest-himalayas-nuptse-lhotse-51387.jpeg); (see http://g.co/ng/security#xss).

As it's a <div>, I cannot really count on [ngSrc].

Upvotes: 0

Views: 2873

Answers (2)

Fetrarij
Fetrarij

Reputation: 7326

You can use ngStyle for that: 

<div [ngStyle]="{'background-image': 'url(' + src + ')'}">...</div>

Upvotes: 3

ifantom
ifantom

Reputation: 1

You should make this url trusted in your component code and a litle bit change you component template like this:

import {DomSanitizer} from '@angular/platform-browser';
...

export class OverlayCard {
    @Input() src: string;

    constructor(private sanitizer: DomSanitizer) {
        this.trustedSrc = sanitizer.bypassSecurityTrustUrl(this.src);
    }
<div class="card card-image mb-3" style="background-image: url({{trustedSrc}});"  [ngClass]="(alignment==='left')?'text-left':(alignment==='right')?'text-right':'text-center'">
    <div class="text-white d-flex py-5 px-4 {{color}}">
        <ng-content></ng-content>
    </div>
</div>

Upvotes: 0

Related Questions