ionic-Ionen-tab-Symbol mit benutzerdefinierten Bild
Hier mein original-Frage auf Ionischen forum. Es wurde keine Antworten Sie für einige Zeit, so dass ich dachte, ich könnte hoffentlich etwas Hilfe von hier 🙁
So, meine Frage ist wirklich der Titel. Ich würde gerne meine benutzerdefinierte Bild als Symbol für die Ionen-tab in meinem Ionischen Anwendung. Ich habe geprüft, dass es funktioniert über ionic serve
indem Sie es tun, wie die folgenden:
tabs.html
<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>
style.css
...
.tab-live {
background-repeat: no-repeat;
background-size: contain;
background-position-x: center;
background-image: url('../img/live.png');
}
.tab-replay {
background-repeat: no-repeat;
background-size: contain;
background-position-x: center;
background-image: url('../img/replay.png');
}
jedoch, wenn ich die app auf meinem android-Gerät, es sagt Failed to load resource: net::ERR_FILE_NOT_FOUND
für meine tab-live
und die tab-live
Symbol wird nicht geladen. Von dem was ich verstehe, wird dieser Fehler tritt auf, wenn die app versucht zu laden, einen bestimmten Vermögenswert-Datei, bevor Sie geladen wird in den Arbeitsspeicher. Aber nur die tab-live
Bild nicht geladen werden, während alle anderen Bilder lädt Ordnung.
Wenn es sein könnte, ein Problem, das tab/live
Seite ist, was wird geladen, wenn die app gestartet wird, und die Größe meiner live.png
Datei ist über 5.54kb
. Ich habe ein weiteres Bild, dass ich in diesem tab/live
Seite, die größer ist dieses Bild, aber es lädt gut und ich verwenden ein img
tag mit ng-src={{ btnImage }}
ändern Sie es um.
Also, was könnte die Ursache dieses Problems und wie könnte ich es beheben?
Vielen Dank im Voraus.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Benutzerdefinierte Symbole für die ionisch sind, können Sie Ihre Klasse name
code wie unten...
Zum Beispiel
Dieser Fehler bedeutet, dass die Datei nicht gefunden wurde. Entweder der Pfad falsch oder die Datei ist nicht vorhanden, wo Sie es haben wollen. Sind Sie sicher, dass Sie Ihr Bild in www/img Ordner, weil es für mich funktioniert in android.
ionic serve
und überprüfen Sie es auf localhost. Es tritt nur auf, wenn ich es in meinem android-Gerät. Alle Vermutungen, warum es nicht geladen wird?www/templates/tabs.html
undwww/css/style.css
.tab-live
und.tab-replay
und nur meine.tab-live
Durcheinander gebracht, auf meinem Gerät und.tab-replay
funktioniert Prima. Was mehr ist, funktionieren beide gut aufionic serve
hahahaBitte überprüfen Sie die Datei, name & - Erweiterung der image-Datei.
wenn Sie die test-app mit "ionic serve" - es ist groß-und Kleinschreibung aber auf Android-Gerät und Kleinschreibung ist wichtig.
Zum Beispiel:
ändern "myicon.PNG" zu "myicon.png"
Hatte ich gearbeitet, auf die bei der Implementierung der gleichen Funktionalität und vor ähnlichen Fragen. Hier ist meine die tatsächliche Antwort auf Ionischen Forum
Ich weiß nicht, ob das problem noch existiert, aber vielleicht ist meine Antwort helfen würde, devs, die möglicherweise kommen über diese.
So, hier ist, wie Nagel es:
CSS:
HTML:
Danke 😀