I’ve got insights from this. So, here’s what I have done:
code for my ion-tabs
:
<ion-tabs class="tabs-icon-bottom tabs-color-active">
<!-- this icon does not load -->
<ion-tab title="LIVE" icon="tab-live energized" href="tab/live">
<ion-nav-view name="tab-live"></ion-nav-view>
</ion-tab>
<ion-tab title="REPLAY" icon="tab-replay energized" href="tab/replay">
<ion-nav-view name="tab-replay"></ion-nav-view>
</ion-tab>
<ion-tab title="SETTINGS" icon="ion-android-options energized" href="tab/setting">
<ion-nav-view name="tab-setting"></ion-nav-view>
</ion-tab>
</ion-tabs>
my css class declaration:
.tab-live {
background-repeat: no-repeat;
background-size: contain;
background-position-x: center;
background-image: url('../img/radio_energized.png');
}
.tab-replay {
background-repeat: no-repeat;
background-size: contain;
background-position-x: center;
background-image: url('../img/replay.png');
}
I get Failed to load resource: net::ERR_FILE_NOT_FOUND
for .tab-live
when I test it on my android device. When I test it using serve and localhost, it doesn’t show this error.
From what I understand, this is because the asset file has not been loaded before it was called upon. But then why would my img file for tab-replay
be loaded on time when my tab-live
img file won’t be?
Oh, and btw, the first page that opens when the app launches is the /tab/live
, if that makes any difference? (I’ve tested if this is the problem by changing my root page, but still no luck)