Lokale Bilder nicht in Ionic

Question

Ich weiß, dass diese Frage mehrmals gestellt wurde, und ich habe alle Lösungen, die ich im Internet finden kann, ohne Erfolg versucht, also versuche ich hier wieder zu sehen, ob ich etwas verpasst habe.

Ich baue eine Hybrid-App mit Ionic. Ich habe ein lokales Bild, das ich zeigen möchte, auch wenn der Benutzer die App ohne Internetverbindung startet oder die Verbindung verliert, während er durch die App geht. Daher möchte ich das Bild lokal haben.

Dies ist mein Tag, um das Bild zu erhalten: <img class="track-image-left" src="images/track.png" />. Das Bild befindet sich in www/images, nachdem Ionic die App erstellt hat.

Ich habe versucht, ionen zu emulieren android --lc und die Konsole in Chrome anzeigen gibt mir folgendes: GET file:///android_asset/www/images/track.png net::ERR_FILE_NOT_FOUND. Die einzige Sache, die ich finde, sieht witzig ist, dass Ionic eine Zeichenfolge zum Dateinamen hinzufügt, so dass der Bilddateiname im tatsächlichen Ordner wie track.516c558c.png aussieht. Kann das das Problem sein?

Sonst weiß jemand, was das Problem sein könnte?

Beachten Sie, dass das Problem sowohl in Android als auch in iOS auftritt.

Answer 1

Die Antwort war, dass ich Grunt nutze, um die App vor dem Emulieren mit ionischen zu bauen. . Grunt den Dateinamen nicht geändert haben, aber es war so spät in den Build-Prozess durchgeführt (Lauf grunt build --force && ionic emulate android --lc, dass es wie ionische angesehen wurde den Dateinamen ändern zu tun, nicht grunzen

Deshalb habe ich stattdessen diese:

.track-image-left { 
    background: url('../images/train-track.png') no-repeat; 
    background-size: 100%; 
    display:inline-block; 
    float: left; 
    height: 20px; 
    width: 40px; 
    margin-top: 40%; 
} 

.track-image-right { 
    background: url('../images/train-track.png') no-repeat; 
    background-size: 100%; 
    display:inline-block; 
    float: right; 
    height: 20px; 
    width: 40px; 
    margin-top: 40%; 

    -moz-transform: scaleX(-1); 
    -o-transform: scaleX(-1); 
    -webkit-transform: scaleX(-1); 
    transform: scaleX(-1); 
    filter: FlipH; 
    -ms-filter: "FlipH"; 
} 

<div class="track-image-left"></div> 
<div class="track-image-right"></div> 

Das hat gut funktioniert.