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

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

img- file name

image should be stored in assects

Answer 2

Since Ionic2 apps ES2015 js complies down to normal javascripts(ES5), you should have your images etc in the www/build folder

So create a folder www/build/img and add your images in there. Then you should be able to access it as build/img/img1.png

EDIT

Adding an answer to the question i don't undestand why you need to work the code in app folder but put insert the images into www folder

---

Ionic2 uses latest javascript standards such as ES2015 (ES6) , Typescript (Optional) . This allows us to write code in slightly different way than we do in normal javascript. With classes modules etc.

However still most of the browsers doesn't support this new javascript standards , hence Ionic uses a concept called transpiler to change the new javascript code to old fashion javascript code so that browsers can understand.

So with Ionic2 even though u code in the app folder ultimately it compiles and runs from the www folder. Technically speaking your ionic app still runs from the www folder, because of that reason you have to add your images to the www folder.

Answer 3

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 4

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 5

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

Answer 6

The following worked for me.

Inserted <img src="../../assets/imgs/logo.png" alt="couldn't load"> to home.html file located inside app/src/pages/home directory.

Location of the image is app/src/assets/imgs/logo.png

Hope this helps.