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

Possible duplicate of [Where do Images go in IONIC 2](http://stackoverflow.com/questions/35987213/where-do-images-go-in-ionic-2) — Musa Haidari, Nov 13 '16 at 05:10

score 37 · Answer 1 · answered Nov 15 '16 at 16:42

37

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.

answered Nov 15 '16 at 16:42

Vladimir

2,481
4
31
41

3

The ONLY correct answer for this question. Saved me hours. Thank you. – tmuecksch Dec 26 '16 at 22:24
The `` does not seem to work in Ionic View app? – devqon Apr 07 '17 at 12:04
yeah, i'm having the same issue. When i add img tag, my app wont render. – djangofan Jan 16 '22 at 20:19

user1275105 · Accepted Answer · 2016-06-14T19:31:39.010

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.

How to use gulpfile.js to load a folder in device. because i am added folder which consist one image and json file. can you help how to add gulpfile to load my folder in device ionic 3. — Khurshid Ansari, Jun 12 '18 at 22:03

sameera207 · Answer 3 · 2016-05-21T14:45:09.390

8

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.

edited May 21 '16 at 14:45

answered Mar 29 '16 at 21:30

sameera207

16,547
19
87
152

if that works, keep your images anywhere and give full path starting with `/` (root) and it should work. ie:[ image folder `www/xyz/img` and `` ] , or make use of `` – Ankit Singh Mar 30 '16 at 05:11
Thanks, i don't undestand why you need to work the code in app folder but put insert the images into www folder – Braian Mellor May 04 '16 at 18:47
i done as said but i get err in my console http://192.168.1.2:8100/www/build/img/image.png 404 (Not Found) @BraianMellor – Yokesh Varadhan May 20 '16 at 05:22
@YokeshVaradhan where do you put the image? Can you write the path and the img source? – Braian Mellor May 20 '16 at 05:25
ionic2 image is in www/build/img file name is image.png, and in my browser i get a small image like icon but i don,t get the actual image

– Yokesh Varadhan May 20 '16 at 05:36
You don't want the /www part, try using src="build/img/image.png" instead. – toepoke.co.uk May 20 '16 at 07:17
@BraianMellor, little late to the party, however I updated my answer explaining why you should add images to www folder. THT :) – sameera207 May 21 '16 at 07:33
@sameera207 like your answer even more. – Braian Mellor May 21 '16 at 13:55
@YokeshVaradhan without the www un your src. Thanks guys – Braian Mellor May 21 '16 at 13:55
@BraianMellor check this http://stackoverflow.com/questions/37382853/could-not-able-to-view-image-in-ionic-2 – Yokesh Varadhan May 23 '16 at 04:53
Yes and as the answer said, the link goes to www folder. And the common way is to put in inside the build folder. – Braian Mellor May 23 '16 at 14:51
Please see my answer for a better way to work with image using Gulp – user1275105 Jun 14 '16 at 19:16

score 2 · Answer 4 · answered May 03 '16 at 20:47

2

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

answered May 03 '16 at 20:47

Sergio182k

31
3

score 2 · Answer 5 · answered Apr 05 '18 at 11:31

2

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.

answered Apr 05 '18 at 11:31

Jishnu P

21
4

score 0 · Answer 6 · answered Aug 11 '16 at 08:08

0

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

answered Aug 11 '16 at 08:08

glemiere

4,790
7
36
60

score 0 · Answer 7 · answered Sep 22 '16 at 15:46

0

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!

answered Sep 22 '16 at 15:46

Félix Castro

59
1
3

score 0 · Answer 8 · answered Oct 03 '16 at 07:41

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!

score -1 · Answer 9 · edited Nov 09 '16 at 11:17

-1

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

img- file name

image should be stored in assects

edited Nov 09 '16 at 11:17

Robert

5,278
43
65
115

answered Nov 09 '16 at 10:55

Sumedh Bahatkar

1

How to insert image in ionic 2

9 Answers9

Linked