web-dev-qa-db-fra.com

Où vont les images dans IONIC 2

Je commence tout juste à utiliser Ionic 2. J'ai créé un fichier img dans app à l'intérieur duquel se trouve un fichier logo.png. J'ai donc créé le code suivant:

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>

Je sais que le css fonctionne, comme si je changeais la couleur de fond, j'obtenais les résultats attendus. Cependant, je n’obtiens aucune image d’arrière-plan, mais uniquement le texte du logo spécifié. Où devrais-je avoir mis le fichier image?

ionic-frameworkionic2
23
George Edwards

EDIT: depuis Ionic 2 RC 0, l'emplacement correct pour placer vos images est dans src/assets/img/ et le code correct pour référencer l'image est <img src="assets/img/myImg.png">. Veuillez consulter le journal des modifications de Ionic pour RC0 (en particulier le numéro 28).

À partir de maintenant, en utilisant la référence officielle de Drifty Co. Ionic 2 App Conférence , les images doivent être placées dans le répertoire www/.

Dans mon application Ionic 2 actuelle, une image est située à www/img/logo.png et elle est référencée dans app/pages/page_name/page_name.html en tant que <img src='img/logo.png'> et fonctionne comme un charme.

Utilisant actuellement:

  • ionic-angular v2.0.0-beta.6 (package.json)
  • ionic-native ^ 1.1.0 (package.json)
  • ionic-cli v 2.0.0-beta.25 (CLI installée)
35
TheBrockEllis

En utilisant Ionic 2 beta 6, j’ai géré cela avec une tâche simple. J'ai déposé mes images dans app/assets/images (ce chemin est complètement arbitraire). Ensuite, j'ai ajouté la tâche suivante à gulpfile.js:

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

Vous devrez également mettre à jour les tâches watch et build pour inclure la nouvelle tâche assets dans leurs appels à runSequence(). Je ne crois pas que l'ordre des tâches dans la séquence importe, dans ce cas:

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

Si vous exportez vos images sur le même chemin que moi, vous feriez référence à vos images dans CSS à partir de ../images/image-name.png et dans les tags <img> à partir de build/images/image-name.png. J'ai confirmé que ces images sont visibles à partir du navigateur et d'un appareil Android. Je ne pense pas que cela devrait être différent pour iOS.

23
Justin

Le dossier assets est le bon dossier pour placer n'importe quel média . L'emplacement de mon image: 

fyi: si vous n'avez pas le dossier, créez-le

src > assets > img > background.png

variables.scss 

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

Puis sur la page je veux l'utiliser sur:

home.html 

<ion-content padding class="backgroundImage">

</ion-content>

Vous pouvez également référencer des images de la manière suivante:

home.html 

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

www\lib\ionic inside ionic crée un dossier img maintenant votre chemin www\lib\ionic\img placez votre image de fond dans ce dossier img et dans votre 

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%;
}
3
KAUSHAL J. SATHWARA

OK, alors j'ai trouvé la réponse sur le forum IONIC. Les images vont dans www/img, les chemins d'accès à ceux-ci sont alors:

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

lorsque référencé à partir de CSS ou HTML dans un dossier de page qui est dans pages dans app.

J'espère que cela aidera tout le monde à l'avenir.

1
George Edwards

Vous avez la solution. Son using path relatif à index.html et non au dossier template.

Nous avons donc besoin du chemin d’utilisation sans ../

src = "img/John_Williams.jpg"

Cela fonctionne à la fois sur navigateur et apk 

1
Abhay Singh

J'avais le même problème, j'ai trouvé un moyen, je ne sais pas si c'est le meilleur, mais c'est un travail. 

les images doivent aller sur un fichier similaire à construire, dans le dossier www

  • www
  • construire
  • img
1
Sergio182k

Je suis actuellement sur la version 3.6 d'ionic et je devais l'utiliser pour travailler: src="../../assets/img/myImage.jpg"

Le chemin assets/img/myImage n'a pas fonctionné pour moi

J'espère que ça aide

0
Giwrgos Lampadaridis

Je n'ai pas réussi à le faire fonctionner avec un fichier PNG. Cela fonctionnait dans le navigateur, mais lorsque je construisais l'application et que je me déployais sur un appareil, cela ne s'affichait pas.

Au lieu de manipuler le fichier Gulp pour comprendre ce qui se passait, j'ai imaginé une solution de contournement plus simple:

Insérez l'image dans votre code HTML (ou CSS) à l'aide d'un URI de données. 

Il existe de nombreux outils en ligne tels que celui-ci qui convertira votre PNG en un URI de données Base64.

0
Pierre Henry

Si votre image est pool.jpg. Placez-le dans /src/assets/img/pool.jpg

Il doit se trouver dans ce répertoire (ressources), car il s’agit de la source à partir de laquelle tout est construit.

Puis arrêtez votre commande de service ionique (Ctrl-C) ou ce que vous utilisez.

Supprimez ensuite TOUT dans le répertoire www (tout sera reconstruit de toute façon).

Puis redémarrez votre serveur en exécutant à nouveau 'ionic serve'.

Ceci reconstruira le répertoire avec les images . Vous pouvez référencer l'image en tant que background-image: url ('../ assets/img/pool.jpg'); Dans votre code.

J'utilise ionic 3 et c'est dommage qu'il ne détecte pas les modifications apportées au répertoire des actifs. IONIC devrait regarder cela.

0
Denis