Ionic 4: change ion-content background-image programmatically (iOS)

Ionic Framework
1

Hello,

I’m trying to set the background of my ion-content via TS, using ngStyle on html.
the problem is that i’m using bypassSecurityTrustResourceUrl for iOS and it works when try to show it in image but it’s not woking when I try to set it with ng Style , I tried also [Style.background] but it’s showing me Security warning and not showing anything.

Ts part

this.image = this.sanitizer.bypassSecurityTrustResourceUrl(this.webview.convertFileSrc(cordova.file.dataDirectory + img));

This is not showing the image : when I inspect i get background-image ionic://localhost/undefined, I tried also --background.

<ion-content fullscreen class="ion-padding" [ngStyle]="{'background-image':'url('+image+')'}">

This works fine and showing my picture:

<img [src]="image" style="width: 70px; height: 100px;" />

Angular version: 8.1.2
ionic-native/core: 5.0.0
iOS: 13.3.1

2

Sanitized things are fragile black boxes, and you should do as little as absolutely possible with them. Your ngStyle attribute is converting it to a string, which causes it to lose its magical pixie dust. See this issue for further guidance.

3

Thank you for your reply, I’m just using them for showing images on iOS , this problem doesn’t exist on Android.
I think it’s a problem related to iOS caused by webview.
I tried so many solution for ion-content even the solution in issue that you gave me and it didn’t work.
For now I will just show the image with < img >.