How to insert image in ionic 2

Question

I'm new on ionic 2 and i'm trying to insert an image, but i don't realize the real path. inside the file 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>

Create a folder app/img and inserted an img1.png file inside it. and the same file inside the app/pages/getting-started folder.

So, this should be easy, but can't find anything inside the ionic docs.

Thanks

Answer 1

Tested with Ionic2.rc2:

The default build takes the images under src/assets/img and puts it under assets/img. In order to reference them from the scss files you need to go up a folder:

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

That's the only way I got it to work, even even leaving out the '../' worked on the browser while testing.

At the same time, if you're referencing the images from the view (html files), here's what works for me:

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

Ionic 2 is somewhat unstable so there're still some quirks that need to be ironed out.

Good luck.

Answer 2

Personally, I would add the images wherever it makes more sense for you, in your case in the app folder, and add a Gulp task to copy the images to the www/build folder.

This is how my gulpfile.js lookslike: https://github.com/driftyco/ionic2-app-base/blob/master/gulpfile.js

I have added this simple task to the gulpfile.js around line 66.

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

Make sure the task images is added to the list of tasks that run before the watch task (the tasks listed inside [..], 3rd line). Also, make sure to run gulpWatch whenever you add a new image for example (line 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);
    }
  );
});

Alternatively, you can use this gulp plug-in https://www.npmjs.com/package/ionic-gulp-image-task and require it and use in your gulpfile.js similar to the other tasks such as copyHTML, copyFonts, copyScripts here https://github.com/driftyco/ionic2-app-base/blob/master/gulpfile.js

I hope that makes sense.