Angular 2 ngStyle and background-image

Question

I have a big trouble with Angular 2 ngStyle directive. I can't set background image from base64 encoded file. Now in template.html I have this:

  <div class="projects_item_wrap" [ngStyle]="{'background-image':'url('+images[i].file+')'}">

Where 'images' is an array of base64 encoded .png files and their names.

Console.log of images[3].file give me this (trouble not inside an image, it works perfectly when I use it in img src='...'):

Any ideas? Thanks a lot for answers! :)

See https://stackoverflow.com/questions/37076867/in-rc-1-some-styles-cant-be-added-using-binding-syntax/37076868#37076868 — Günter Zöchbauer, Sep 04 '17 at 16:38
If you mean domSanitizer - I have already try it - nothing changed :( — Wondergrauf, Sep 04 '17 at 16:40
Alternative `[style.background-image]="'url('+images[i].file+')' | safeResourceUrl"` (where the pipe uses `bypassSecurityTrustResourceUrl(value)` — Günter Zöchbauer, Sep 04 '17 at 16:40
See also https://stackoverflow.com/questions/39524536/angular-2-disable-sanitize — Günter Zöchbauer, Sep 04 '17 at 16:42
Tried to add pipe - no result. Also tried to add sanitizer.bypassSecurityTrustStyle() - same, no result. — Wondergrauf, Sep 04 '17 at 17:10
Here is a screenshot where you can see makeTrustedStyle and pipe: https://prnt.sc/gh0tv1 — Wondergrauf, Sep 04 '17 at 17:28
Here I tried to user ...TrustUrl() - http://prntscr.com/gh0z9d — Wondergrauf, Sep 04 '17 at 17:38
I already tried to use them both (...TrustStyle and TrustUrl) - you can see result on previous screenshot. — Wondergrauf, Sep 04 '17 at 17:39
Did you try `trustUrl` with `[style.background-image]="myUrl"`? As you see in the questions I linked, it worked for others. — Günter Zöchbauer, Sep 04 '17 at 17:46
Ofcourse. Here is used method: https://prnt.sc/gh178l And here is result: http://prntscr.com/gh17wd Tried to use pipe (...TrustUrl, ...TrustStyle) - same, no result. In Chrome dev. tool style is not visible. — Wondergrauf, Sep 04 '17 at 17:58

score 2 · Accepted Answer · answered Sep 07 '17 at 06:50

Linebreaks within received base64 image was a reason of trouble. This is my solution:

//This goes to template <div>:
[style.background-image]="makeTrustedImage(images[i].file)"

//And this goes to component:
constructor(private domSanitizer: DomSanitizer) {}

makeTrustedImage(item) {
    const imageString =  JSON.stringify(item).replace(/\\n/g, '');
    const style = 'url(' + imageString + ')';
    return this.domSanitizer.bypassSecurityTrustStyle(style);
  }

Angular 2 ngStyle and background-image

1 Answers1

Linked