Comment insérer une image dans ionic 2

je suis nouveau sur ionic 2 et j'essaie d'insérer une image, mais je ne me rends pas compte du vrai 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ée un dossier app / img et insère un img1.fichier png à l'intérieur. et le même fichier dans le dossier app/pages/getting-started.

donc, cela devrait être facile, mais ne peut rien trouver à l'intérieur des docs ioniques.

Merci

19
demandé sur Braian Mellor 2016-03-29 21:12:55

9 réponses

personnellement, je voudrais ajouter les images partout où cela vous semble plus logique, dans votre cas dans le dossier app , et ajouter une tâche Gulfp pour copier les images dans le dossier www/build .

C'est comme ça que mon gulpfile.js ressemble à https://github.com/driftyco/ionic2-app-base/blob/master/gulpfile.js

j'ai ajouté cette simple tâche au 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 énumérées à l'intérieur [..], 3e ligne). Aussi, assurez-vous d'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);
    }
  );
});

alternativement, vous pouvez utiliser ce plug-in https://www.npmjs.com/package/ionic-gulp-image-task et require et l'utiliser dans votre gulpfile.js similaire aux autres tâches telles que copyHTML , copyFonts , copyScripts ici https://github.com/driftyco/ionic2-app-base/blob/master/gulpfile.js

j'espère que c'est logique.

15
répondu user1275105 2016-06-14 19:31:39

Testé avec Ionic2.rc2:

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

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

C'est le seul moyen pour que ça marche, même en laissant de côté le"../' travaillé sur le navigateur lors des tests.

en même temps, si vous référencez les images à partir de la vue (fichiers html), voici ce que travaille pour moi: 

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

ionique 2 est un peu instable donc il ya encore quelques bizarreries qui doivent être repassées.

bonne chance.

36
répondu Vladimir 2016-11-15 16:42:33

depuis Ionic2 apps ES2015 js conforme jusqu'à la normale javascripts (ES5), vous devriez avoir vos images etc dans le www/build dossier

donc créer un dossier www/build/img et y ajouter vos images. Alors vous devriez être en mesure d'y accéder en tant que build/img/img1.png

MODIFIER

ajoutant 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 la dernière les normes javascript telles que ES2015 (ES6) , Typescript (optionnel) . Cela nous permet d'écrire du code d'une manière légèrement différente de ce que nous faisons en javascript normal. Avec les modules de classes etc.

cependant , la plupart des navigateurs ne supporte pas ces nouvelles normes javascript, C'est pourquoi Ionic utilise un concept appelé transpiler pour changer le nouveau code javascript en code javascript de mode ancienne afin que les navigateurs puissent comprendre.

donc avec Ionic2 même si u code dans le dossier app finalement il compile et exécute à partir du dossier www. Techniquement parlant votre ionique application fonctionne toujours à partir du dossier www, pour cette raison, vous devez ajouter vos images vers le dossier www.

8
répondu sameera207 2016-05-21 14:45:09

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

les images doivent aller sur un frère de fichier pour construire, à l'intérieur du dossier www

- www

-- construire

-- img

2
répondu Sergio182k 2016-05-03 20:47:52

ce qui suit a fonctionné pour moi.

inséré <img src="../../assets/imgs/logo.png" alt="couldn't load"> à domicile.fichier html situé à l'intérieur de app/src/pages / home directory.

Emplacement de l'image est app/src/assets/dim/logo.png

Espérons que cette aide.

1
répondu Jishnu P 2018-04-05 11:31:07

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

0
répondu Guillaume Le Mière 2016-08-11 08:08:14

j'ai eu le même problème. Vous devez seulement créer le dossier img dans www. -- >www / img (mettez les images dans le dossier...)

puis à la page (html) votre must reference <img src="img/logo.png" />

je l'ai tester en le Navigateur google Chrome , Android et App Ios . (Ionique 2.0.0-bêta.11)

salutations!

0
répondu Félix Castro 2016-09-22 15:46:01

j'ai eu le même problème en utilisant le bêta ionique dernier ionique@beta11.

pour résoudre ce problème, vous pouvez ajouter le chemin absolu des images dans la copie.config.fichier js qui résidera 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 (dest).

Espérons que cette aide pour copier les images dossiers vers le dossier www/build/images

Merci d'avance!

0
répondu krishna raju 2016-10-03 07:41:54 
<img src = "assects/img/abc.png"/>

img- file name

image doit être stockée dans assects

-1
répondu Sumedh Bahatkar 2016-11-09 11:17:44