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

Question

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!

check this: https://stackoverflow.com/q/34875426/2050306 – robert Jul 04 '19 at 19:37 — robert, Jul 04 '19 at 19:37
Maybe you should provide a plunkr ... – M'sieur Toph' Jul 04 '19 at 22:09 — M'sieur Toph', Jul 04 '19 at 22:09

score 1 · Accepted Answer · answered Jul 04 '19 at 21:02

1

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.

answered Jul 04 '19 at 21:02

Nerijus Pamedytis

124
8

maybe the element doesn't have size? <----- that was it....jesus!! shame on me. it it white on the top... – Thomas Jul 05 '19 at 14:47

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

1 Answers1