Wo gehen Bilder in IONIC 2

Question

Ich bin gerade dabei, mit Ionic 2 zu beginnen. Ich habe eine img Datei in app erstellt, in der es eine Datei logo.png ist. So habe ich den folgenden Code erstellt:

css:

.getting-started { 
    .logo { 
     background-image: url(./img/logo.png); 
    } 
} 

html:

<ion-col offset-33 width-33 class="logo"><h1>Logo</h1></ion-col> 
    <h3>Welcome to your first Ionic app!</h3> 

</ion-content> 

Ich weiß, dass die CSS arbeitet, als ob ich die Hintergrundfarbe wechseln, ich die erwartete bekommen Ergebnisse. Ich bekomme jedoch kein Hintergrundbild, nur den angegebenen Logotext. Wo soll ich die Bilddatei abgelegt haben?

Answer 1

EDIT: Ab Ionic 2 RC 0, der richtige Ort, um Ihre Bilder zu setzen ist in src/assets/img/ und der richtigen Code um das Bild zu verweisen ist <img src="assets/img/myImg.png">. Bitte beachten Sie Ionics change log für RC0 (speziell # 28).

---

Ab jetzt, die offizielle Drifty Co. Ionic 2 Conference App als Referenz verwenden, sollten Bilder im Inneren des www/ Verzeichnis platziert werden.

In meiner aktuellen Ionic 2 App befindet sich ein Bild bei www/img/logo.png und es wird in app/pages/page_name/page_name.html als <img src='img/logo.png'> referenziert und es funktioniert wie ein Charme.

Derzeit verwenden:

• ionisch-Winkel v2.0.0-beta.6 (package.json)
• ionisch-native^1.1.0 (package.json)
• ionisch-cli v 2.0.0-beta.25 (installiert CLI)

Answer 2

www \ lib \ ionisch innen erstellen ionisch einen Ordner img jetzt Ihr Weg www \ lib \ ionisch \ setzen img Ihr Hintergrundbild in diesem img Ordner und in Ihrem

www\lib\ionic\css\ionic.css 
inside ionic.css find .view-container class and past this line. 
.view-container { 
background: url("../img/main_bg.jpg") repeat scroll 0 0/100% 100%; 
} 

Answer 3

OK, so dass ich gefunden die Antwort auf das IONIC-Forum. Die Bilder gehen in www/img, um diese Pfade ist dann:

url('../../img/appicon.png') 

, wenn sie von CSS oder HTML in einer Seite Ordner verwiesen, die in pages in app ist.

Hoffe das hilft jedem in der Zukunft.

Answer 4

Ich konnte es nicht schaffen, es mit einer PNG-Datei arbeiten zu lassen. Es funktionierte im Browser, aber wenn ich die App erstellte und auf einem Gerät bereitgestellt wurde, wurde sie nicht angezeigt.

Statt mit der Gulp-Datei von Hantieren zu verstehen, was los war, dachte ich, eine einfachere Abhilfe aus:

Inline das Bild in Ihren HTML (oder CSS) unter Verwendung einer Daten URI.

Es gibt viele Tools online wie this one, die Ihre PNG in eine Base64-Daten-URI konvertieren werden.

Answer 5

Ich hatte das gleiche Problem, ich fand einen Weg, ich weiß nicht, ob es der beste Weg ist, aber es ist Arbeit.

die Bilder auf einem Datei Geschwister zu bauen, innerhalb Ordner www

• www
• build
• img

Answer 6

Mit Ionic 2 Beta 6, behandelt ich dies mit einer gehen muss einfache Schluckaufgabe. Ich habe meine Bilder in app/assets/images gelöscht (dieser Pfad ist völlig willkürlich). Dann fügte ich die folgende Aufgabe zu gulpfile.js:

gulp.task("assets", function() { 
    return gulp.src(["app/assets/images/*"]) 
     .pipe(gulp.dest("www/build/images")); 
}); 

Sie werden auch die watch und build Aufgaben aktualisieren müssen, um die neue assets Aufgabe in ihre Anrufe zu runSequence() umfassen.Ich glaube nicht, die Reihenfolge der Aufgaben in den Folgefragen, in diesem Fall:

gulp.task("build", ["clean"], function(done) { 
    runSequence(
     ["sass", "html", "fonts", "assets", "scripts"], 
     function() { 
      buildBrowserify().on("end", done); 
     } 
    ); 
}); 

Wenn Sie die Ausgabe Ihrer Bilder auf den gleichen Weg wie ich, dann würden Sie Ihre Bilder in CSS von ../images/image-name.png verweisen und in <img> Tags von build/images/image-name.png. Ich habe bestätigt, dass diese Bilder sowohl vom Browser als auch von einem Android-Gerät aus sichtbar sind. Ich denke nicht, dass es für iOS anders sein sollte.

Answer 7

Hallo Leute ich fand eine Methode, Bilder in den ionischen v2

erstellen Bilder-Ordner in "www" Verzeichnis (w ww/images /) und füge alle Bilder in diesem Pfad hinzu.

geben Sie dann Ihr Bild Pfad so ab: für Seiten src = "images/logo.png"

in CSS .ThemeColor {background: url (/images/bg.png)};

Das ist es, funktioniert für mich ..

Dank

Answer 8

Das Vermögen Ordner ist der richtige Ordner alle Medien zu platzieren. Die Lage meines Bildes:

FYI: Wenn Sie den Ordner nicht haben, erstellen Sie einfach es

src > assets > img > background.png 

variables.scss

.backgroundImage { 
    background-image: url('../assets/img/background.png'); 
} 

dann auf der Seite, die ich verwenden möchten es auf:

zu Hause.html

<ion-content padding class="backgroundImage"> 

</ion-content> 

Sie können Bilder auch auf folgende Weise verweisen:

home.html

<ion-content padding class="backgroundImage"> 
    <img src="./assets/img/background.png" width="50%" /> 
</ion-content> 

Answer 9

die Lösung. Sein benutzender Pfad relativ zu index.html und nicht Vorlagenordner.

Also brauchen wir Pfad zu verwenden, ohne ../

src = "img/John_Williams.jpg"

Dies funktioniert sowohl auf Browser und apk

Answer 10

Wenn Ihr Bild Pool .jpg. Legen Sie es in /src/assets/img/pool.jpg

Es muss in diesem Verzeichnis (Assets) sein, da es Ihre Quelle ist, von wo alles gebaut wird.

Dann stoppen Sie Ihren ionischen Serve-Befehl (Strg-C) oder was auch immer Sie verwenden.

Dann löschen Sie alles unter WWW-Verzeichnis (alles wird sowieso wieder aufgebaut).

Starten Sie Ihren Server neu, indem Sie erneut 'ionic serve' ausführen.

Dadurch wird das Verzeichnis mit den Bildern neu erstellt. Sie können auf das Bild als Hintergrundbild verweisen: url ('../ assets/img/pool.jpg'); in Ihrem Code.

Ich benutze ionic 3 und es ist eine Schande, dass es Änderungen im Verzeichnis Assets nicht aufnimmt. IONIC sollte das betrachten.

Answer 11

Ich bin zur Zeit auf ionische Version 3.6 und ich hatte diese Arbeit zu verwenden: assets/img/myImagesrc="../../assets/img/myImage.jpg"

Der Weg für mich nicht funktioniert hat

Ich hoffe, das hilft