Ionic_Adding Images - smukov/AvI GitHub Wiki

Adding Images

In this section I'll describe how to add new images to Ionic2 project, and how to use them in pages.

Add an Image to Project

First we need to add an image to the project. For this, and all future images, we'll add a new img directory inside our app directory. Now we can add our image to this directory.

Compile the Image

In order for our new img directory, and all images inside it, to compile, we need to update the our gulp script inside the gulpfile.js.

Source Code

//code omitted for brevity

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

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

//code omitted for brevity

gulp.task('images', function(){
 return gulp.src('app/img/**/*.+(jpg|png|svg)')
    .pipe(gulp.dest('www/build/img'));
});

All we did here is defined a new gulp.task called images, and told it to get all the files ending with jpg, png, or svg inside the app/img and its subfolders, and send it to www/build/img directory.

We also have to tell gulp to execute this task, and we did that by adding the images task to the runSequence.

Reference the Image

Finally, we are ready to reference an image in our code:

<img src="build/img/image_name.png"/>

Conclusion

It took me some time to figure out how to make gulp to compile the images. I also lost a lot of time trying to guess the path to the image, as <img src="../../img/image_name.png"/>, and similar variations, didn't work.

I'm a little bit wary of gulp, as I'm not really sure how it compiles all the classes I'm adding to the project, so I'm not yet sure how to add a new folder with components, that isn't inside the app/pages directory.