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

I had same problem. Only you must create img folder in www. --> www/img (put images in the folder...)

Then in page (html) your must reference <img src="img/logo.png" />

I test in Chrome Browser, App Android and App Ios . (Ionic 2.0.0-beta.11)

Regards!

Answer 2

I had the same problem while using the Ionic Beta Latest ionic@beta11.

---

To resolve this problem you can append the images absolute path in the copy.config.js file which will be residing in the node_modules/@ionic/app-scripts/config folder

You can append this file for specific folder by providing source (src) and destination (dest) path.

Hope this helps for copy the images folders to www/build/images folder

Thanks in advance!

Answer 3

Just copy your img folder in the www folder and you're done! ;)

Answer 4

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.

Answer 5

<img src = "assects/img/abc.png"/>

img- file name

image should be stored in assects

Answer 6

I was having same problem, I found a way, I don't know if is the best way, but it's work.

the images must go on a file sibling to build, inside folder www
- www
-- build
-- img