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

&         


        

Answer 1

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.