Side Menu Background Image Not Working on Actual Device

Good Day Everyone,

I have an Ionic 3 application which has a side menu that consists of a header and a list of menu under the header. I would like to create something like this:

The problem is that when I set a background image, it only works on the browser but when I tried the application on an actual device, it doesn’t display the background image

Browser (ionic serve)

Device

I have already tried searching the web for solutions but it all didn’t work.

Here is my code:

HTML Component

    <ion-content>
      <div header-background-image padding>
        <img menuClose [src]="domSanitizer.bypassSecurityTrustUrl(params.image)" (click)="openPage('My Profile')">
        <h2 ion-text color="light" header-title text-capitalize>{{params.name}}</h2>
        <p ion-text header-subtitle>{{params.email}}</p>
      </div>
      <ion-list no-margin no-lines>
        <button menuClose ion-item item-title main-menu *ngFor="let p of pages" (click)="openPage(p.theme)" [class.active]="checkActivePage(p.theme)">
          <ion-icon icon-medium item-left>
            <ion-icon name="{{p.icon}}"></ion-icon>
          </ion-icon>
          {{p.title}}
        </button>
      </ion-list>
    </ion-content>

Style Component

[header-background-image] {
  height: auto;
  position: relative;
  background: url('/assets/images/background/3.jpg');
  background-size: 100%;
  background-position: center bottom;
}

I hope someone can help me with this. Thank you in advance :blush:

have you try url path direct from assets ?
background: url('assets/images/background/3.jpg');

1 Like

Yeah but unfortunately, it didn’t work either :cry:

can you find which path apply when you debug app in mobile device ?

1 Like

I am not sure if I get your question right but based on my understanding, you are asking for the file path of the image when the application was opened on a device.

Here it is :

When url is /assets/images/background/3.jpg
file:///assets/images/background/3.jpg

When url is assets/images/background/3.jpg
file:///android_asset/www/build/assets/images/background/3.jpg

try…

url("…/…/assets/images/background/3.jpg");

1 Like

then this will work
background: url('../assets/images/background/3.jpg');

1 Like

Nice. Thank you so much. It works now :heart_eyes:

1 Like