web-dev-qa-db-fra.com

Comment insérer une image dans ionic 2

Je suis nouveau sur ionic 2 et j'essaye d'insérer une image, mais je ne réalise pas le chemin. dans le fichier app/pages/getting-started/getting-started.html

<ion-content padding class="getting-started">
  <ion-card>
    <ion-card-content>
      <img src="img1.png" alt="">
      <img src="img/img1.png" alt="">
      <img src="../img/img1.png" alt="">
    </ion-card-content>
  </ion-card>
</ion-content>

Créez un dossier app/img et insérez un fichier img1.png à l'intérieur. et le même fichier dans le dossier app/pages/getting-started.

Donc, cela devrait être facile, mais rien ne se trouve dans la documentation ionique.

Merci

ionic-frameworkangularionic2
19
Braian Mellor

Personnellement, j’ajouterais les images là où cela vous semblerait plus judicieux, dans votre cas, dans le dossier app, et j’ajouterais une tâche Gulp pour copier les images dans le dossier www/build.

Voici comment mon gulpfile.js ressemble: https://github.com/driftyco/ionic2-app-base/blob/master/gulpfile.js

J'ai ajouté cette tâche simple à la gulpfile.js autour de la ligne 66.

gulp.task('images', function() {
    gulp.src('app/**/**/*.png')
    .pipe(gulp.dest('www/build'))
});

Assurez-vous que la tâche images est ajoutée à la liste des tâches qui s'exécutent avant la tâche watch (les tâches répertoriées à l'intérieur de [..], 3ème ligne). Veillez également à exécuter gulpWatch chaque fois que vous ajoutez une nouvelle image, par exemple (ligne 7).

gulp.task('watch', ['clean'], function(done){
  runSequence(
    ['images','sass', 'html', 'fonts', 'scripts'],
    function(){
      gulpWatch('app/**/*.scss', function(){ gulp.start('sass'); });
      gulpWatch('app/**/*.html', function(){ gulp.start('html'); });
      gulpWatch('app/**/*.png', function(){ gulp.start('images'); });
      buildBrowserify({ watch: true }).on('end', done);
    }
  );
});

Vous pouvez également utiliser ce plug-in gulp https://www.npmjs.com/package/ionic-gulp-image-task et require et l’utiliser dans votre gulpfile.js de la même manière que les autres tâches telles que copyHTML, copyFonts, copyScripts ici https://github.com/driftyco/ionic2-app-base/blob/master/gulpfile.js

J'espère que cela à du sens.

15
user1275105

Testé avec Ionic2.rc2:

La construction par défaut prend les images sous src/assets/img et les place sous assets/img. Pour pouvoir les référencer à partir des fichiers scss, vous devez monter un dossier:

background: url('../assets/img/sports-backgrounds.jpg');

C’est la seule façon pour moi de le faire fonctionner, même en laissant de côté le '../' sur le navigateur pendant les tests. 

En même temps, si vous référencez les images de la vue (fichiers HTML), voici ce qui fonctionne pour moi:

<img src="assets/img/logo-image-for-login-page.jpg"

Ionic 2 est quelque peu instable, donc il reste quelques problèmes à résoudre. 

Bonne chance. 

36
Vladimir

Ionic2 apps ES2015 js étant conforme aux javascripts normaux (ES5), vos images, etc., devraient figurer dans le dossier www/build.

Créez donc un dossier www/build/img et ajoutez-y vos images. Ensuite, vous devriez pouvoir y accéder en tant que build/img/img1.png

MODIFIER 

Ajouter une réponse à la question i don't undestand why you need to work the code in app folder but put insert the images into www folder

Ionic2 utilise les dernières normes javascript telles que ES2015 (ES6), TypeScript (facultatif). Cela nous permet d’écrire du code de manière légèrement différente de celle que nous utilisons en javascript normal. Avec des modules de cours etc.

Cependant, la plupart des navigateurs ne supportent toujours pas ces nouvelles normes javascript, c'est pourquoi Ionic utilise un concept appelé transpiler pour modifier le nouveau code javascript en ancien code javascript afin que les navigateurs puissent comprendre. 

Donc, avec Ionic2 même si le code u dans le dossier de l’application est compilé et exécuté à partir du dossier www. Techniquement, votre application ionique fonctionne toujours à partir du dossier www. C'est pourquoi vous devez ajouter vos images dans le dossier www. 

8
sameera207

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 frère pour construire, dans le dossier www 
- www 
-- construire 
-- img 

2
Sergio182k

Ce qui suit a fonctionné pour moi.

Inséré <img src="../../assets/imgs/logo.png" alt="couldn't load"> dans le fichier home.html situé dans le répertoire app/src/pages/home.

L'emplacement de l'image est app/src/assets/imgs/logo.png

J'espère que cela t'aides.

1
Jishnu P

J'ai eu le même problème. Seul vous devez créer le dossier img dans www. -> www / img (mettre des images dans le dossier ...)

Puis dans la page (html), vous devez référencer <img src="img/logo.png" />

Je teste dans Navigateur Chrome , App Android et App Ios . (Ionic 2.0.0-beta.11)

Cordialement!

0
Félix Castro

J'ai eu le même problème lors de l'utilisation de la dernière version ionique @ beta11 de la version bêta ionique.

Pour résoudre ce problème, vous pouvez ajouter le chemin absolu des images dans le fichier copy.config.js qui sera situé dans le dossier node_modules/@ ionic/app-scripts/config

Vous pouvez ajouter ce fichier pour un dossier spécifique en fournissant le chemin source (src) et destination (destination).

J'espère que cela vous aidera à copier les dossiers images dans le dossier www/build/images

Merci d'avance!

0
krishna raju

Copiez simplement votre dossier img dans le dossier www et vous avez terminé! ;)

0
Guillaume Le Mière