Ionic RC.4 setting fallback image in [style.backgroundImage]

Ionic Framework ionic-v3
1

I have tried to add a fallback image to an inline tag
i.e something like this
<div style="background-image=url('invalid-url'), url('valid-url')"></div>
which converts in ionic2 like this
<div [style.height]="'100px'" [style.width]="'100px'" [style.backgroundImage]="'url('+invalidImg+'), url('+img+')'"></div>

which gives me a warning
sanitizing unsafe style value url(http://placehold.it/100100), url(http://placehold.it/100x100)

that I know is a angular2 bug

Including a plnkr
http://embed.plnkr.co/rHhdAn/

How do I success fully implement a fallback image within this.

FYI: This will go inside a ngFor statement

2

Not the nicest solution, but it works:

In the component:

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

...

constructor(
	...,
	private sanitizer: DomSanitizer
) {}

in the HTML:

<div [style.backgroundImage]="sanitizer.bypassSecurityTrustStyle('url('+invalidImg+'), url('+img+')')"></div>

Note: I have not tested it, but it’s something along those lines :stuck_out_tongue: Hope it helps