CODEWITHSUNDEEP
angulartypescriptbackground-imageangular7
Thomas
Thomas

Reputation: 35

In Angular 7, I can't display a dynamic image as [style.background-image]

In my angular application i load dynamic background images from my backend.

Showing pictures is not a problem.

Background pictures are not loaded, unfortunately I don't get an error message.

my Angular version is 7.3.8.

I tried some solutions from stackoverflow and the web, but nothing help

Layout - html: 

  <div *ngIf="headerImage" [style.background-image]="headerImage">

Layout-Component:

  ngOnInit() {<br/>
      this.setup = this.route.snapshot.data['setup'];
      this.createHeader(this.setup)
    }

   createHeader(setup: Setup){
      const tempImage = 'data:image/png;base64,' + this.setup.headerImage.data;
      this.headerImage = this.sanitizer.sanitize(SecurityContext.STYLE, 'url(' + tempImage + ')');
      console.log(this.headerImage);
      }

Output from my console:

  this.headerImage console.log: url(data:image/png;base64,iVBORw0KGgo.......

I tried 

   [ngStyle]="{'background-image':' url(' + headerImage + ')'}"

and this

   this.backgroundImg = sanitizer.bypassSecurityTrustStyle('url(....)'

But nothing works.

I don't know, what happen? I dont get a error messages and to show a Image is not a problem... but i need a background.

Thx for help!

Upvotes: 1

Views: 1314

Answers (1)

Nerijus Pamedytis
Nerijus Pamedytis

Reputation: 134

Looks like you did everything right, you should try and make sure if there is no external factors that might cause the problem, maybe the element doesn't have size? Have you tried different images? have you tried just setting background: url(...) instead of backround-image: url(...). remember that css style inheritance could be overriding your stuff.

Upvotes: 1

Related Questions