Background image does not show if added dynamically

Ionic Framework
1

I am building an App with ionic 5 where the user should be allowed to customize the background image.

My code:

.html file:

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

.ts file

        this.backgroundImage = '../../assets/image/backgroundImage.png';
2

if user choose from his gallery you can copy that image to your data dir of your app. then with cordova file read that file apply ionic.webview.convertFileSrc() to display image in ion-content

3

User will not choose.

4

can you make it url like assets/image/backgoundImage.png

aka relative url

5

bind it to --background
for example

 --background: #efe7dd url("https://cdn.dribbble.com/users/2479503/screenshots/6384602/chat_background.png") repeat;

<ion-content  [ngStyle]="{'--background':'url('+ backgroundImage + ')'}"></ion-content>
1 Like
6

I’m not clear on what this thread is about, but just want to observe that if the desired goal is to have end-users modify things in assets, that’s not going to happen. assets lives on a virtual filesystem that’s backed by the inside of the app binary itself. It’s not modifiable by end-users or from within app code.

7

I have made such a solution for now:

.ts file:

this.backgroundImage = 'Your image path';

.html file:

<ion-content class="BackgroundImageContent" [ngStyle]="{'background-image': 'url(' + backgroundImage + ')'}">
    <style>
        .BackgroundImageContent {
            --background: none;
            --background-image: url('backgroundImage') no-repeat center center fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>
</ion-content>

This solution worked for me now.

8

This worked for me in Ionic 5.