Where do Images go in IONIC 2

Question

I am just getting started with Ionic 2. I have created an img file in app inside it is a file logo.png. So I have created the following code:

css:

.getting-started {
  .logo {
      background-image: url(./img/logo.png);
  }
}

html:

  <ion-col offset-33 width-33 class="logo"><h1>Logo</h1></ion-col>
  <h3>Welcome to your first Ionic app!</h3>

</ion-content>

I know the css is working, as if I toggle the background color, I get the expected results. However, I don't get any background image, just the Logo text specified. Where should I have put the image file?

TheBrockEllis · Accepted Answer · 2016-09-29T14:20:26.993

35

EDIT: As of Ionic 2 RC 0, the correct place to put your images is in src/assets/img/ and the correct code to reference the image is <img src="assets/img/myImg.png">. Please see Ionic's change log for RC0 (specifically #28).

As of right now, using the official Drifty Co. Ionic 2 Conference App as a reference, images should be placed inside of the www/ directory.

In my current Ionic 2 app, an image is located at www/img/logo.png and it is referenced in app/pages/page_name/page_name.html as <img src='img/logo.png'> and it works like a charm.

Currently using:

ionic-angular v2.0.0-beta.6 (package.json)
ionic-native ^1.1.0 (package.json)
ionic-cli v 2.0.0-beta.25 (installed CLI)

edited Sep 29 '16 at 14:20

answered May 20 '16 at 20:25

TheBrockEllis

979
9
19

4

The path of the image is not consistent on browser and the device. `` does not work on neither. `` works only in browser, but `` works on both browser and actual device – Musa Haidari Nov 13 '16 at 10:53
2

In my HTML I had to use `assets/...` and inside CSS I had to use `../assets/...` – theblindprophet Jan 04 '17 at 17:45
Is this relevant for images you have to download and display? – Kavinda Keshan Rasnayake Feb 03 '17 at 04:03
When using this.app.getRootNav().setRoot(HomePage) images are broken on devices. – Logus Graphics May 29 '17 at 14:05

Justin · Answer 2 · 2016-05-13T21:35:30.967

23

Using Ionic 2 beta 6, I handled this with a simple gulp task. I dropped my images in app/assets/images (this path is completely arbitrary). Then, I added the following task to gulpfile.js:

gulp.task("assets", function() {
    return gulp.src(["app/assets/images/*"])
        .pipe(gulp.dest("www/build/images"));
});

You'll also need to update the watch and build tasks to include the new assets task in their calls to runSequence(). I don't believe the order of tasks in the sequence matters, in this case:

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

If you output your images to the same path as I did, then you would reference your images in CSS from ../images/image-name.png and in <img> tags from build/images/image-name.png. I have confirmed that these images are visible both from the browser and an Android device. I don't think it should be any different for iOS.

edited May 13 '16 at 21:35

answered May 13 '16 at 17:59

Justin

331
2
5

Agreed, this is the proper way to fix the issue, not the one accepted below. This way your project is properly built with only files needed, referencing only files in the build dir – webdevinci Jul 11 '16 at 21:32
If you're putting an image in the HTML then you'll need for example this path `` – Gianfranco P. Aug 27 '16 at 11:21
This is answer is mostly out of date. Since moving from Beta 6, Ionic is moving away from Gulp as its build processor (using Rollup.js instead, although projects can be configured to use any build tools you'd like to use) and the file structure has changed considerably. Please see my answer below for more information and a link to the changelog. – TheBrockEllis Sep 29 '16 at 16:11
Please note that now gulp is not used in ionic 2 any longer. I would go along with TheBrockEllis's answer – Musa Haidari Nov 13 '16 at 05:07

LeRoy · Answer 3 · 2017-03-14T13:33:25.867

The assets folder is the correct folder to place any media. The location of my image:

fyi: if you dont have the folder, just create it

src > assets > img > background.png

variables.scss

.backgroundImage {
  background-image: url('../assets/img/background.png');
}

Then on the page I want to use it on:

home.html

<ion-content padding class="backgroundImage">

</ion-content>

You can also reference images the following way:

home.html

<ion-content padding class="backgroundImage">
    <img src="./assets/img/background.png" width="50%" />
</ion-content>

score 3 · Answer 4 · answered Mar 14 '16 at 12:40

3

www\lib\ionic inside ionic create one folder img now your path www\lib\ionic\img put your background image inside this img folder and in your

www\lib\ionic\css\ionic.css 
inside ionic.css find .view-container class and past this line.
.view-container {
background: url("../img/main_bg.jpg") repeat scroll 0 0 / 100% 100%;
}

answered Mar 14 '16 at 12:40

KAUSHAL J. SATHWARA

994
9
15

Thank you, and if you not change in original ionic.css then in your inside www folder inside any css file PAST THIS CODE .scroll-content { background: rgba(0, 0, 0, 0) url("../img/home-bg.png") repeat scroll 0 0 / 100% 100%; position: absolute; – KAUSHAL J. SATHWARA Mar 14 '16 at 13:01
I don't have a lib folder in www. I generated an IONIC2 project with the tutorial template – George Edwards Mar 14 '16 at 13:45

score 1 · Answer 5 · answered Mar 15 '16 at 13:04

1

OK, so I found the answer on the IONIC forum. The images go in www/img, the paths to these is then:

url('../../img/appicon.png')

when referenced from css or html in a page folder which is in pages in app.

Hope this helps anyone in the future.

answered Mar 15 '16 at 13:04

George Edwards

8,979
20
78
161

Well, this worked when testing in the browser but not when packaging the app and running on a device... – Pierre Henry Apr 21 '16 at 15:12
See http://stackoverflow.com/questions/36292000/how-to-insert-image-in-ionic-2 for the correct fix. – toepoke.co.uk May 20 '16 at 07:17

score 1 · Answer 6 · edited May 03 '16 at 21:41

1

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

edited May 03 '16 at 21:41

Hongbin Wang

1,186
2
14
34

answered May 03 '16 at 20:42

Sergio182k

31
3

score 1 · Answer 7 · answered Apr 15 '17 at 10:29

1

Got the solution. Its using path relative to index.html and not template folder.

So we need use path without../

src="img/John_Williams.jpg"

This works both on browser and apk

answered Apr 15 '17 at 10:29

Abhay Singh

1,595
1
23
40

score 0 · Answer 8 · answered Apr 21 '16 at 15:23

I could not manage to make it work using a PNG file. It worked in the browser but when I build the app and deployed to a device it did not displayed.

Instead of fiddling with the Gulp file to understand what was going on, I figured out a simpler workaround :

Inline the image into your HTML (or CSS) using a Data URI.

There are many tools online such as this one that will convert your PNG to a Base64 data URI.

score 0 · Answer 9 · answered May 18 '17 at 18:53

If your image is pool.jpg. Place it in /src/assets/img/pool.jpg

It needs to be in this directory (assets) as it is your source from where everything gets built.

Then stop your ionic serve command (Ctrl-C) or whatever you use.

Then delete EVERYTHING under www directory (it all gets rebuilt anyway).

Then restart your server by running 'ionic serve' again.

This will rebuild the directory with the images. You can reference the image as background-image: url('../assets/img/pool.jpg'); in your code.

I am using ionic 3 and it's a shame it doesn't pick up changes in the assets directory. IONIC should look at this.

score 0 · Answer 10 · edited Aug 23 '17 at 12:45

0

I 'm currently on ionic version 3.6 and I had to use this to work: src="../../assets/img/myImage.jpg"

The path assets/img/myImage didn't work for me

I hope this helps

edited Aug 23 '17 at 12:45

louisfischer

1,968
2
20
38

answered Aug 23 '17 at 09:40

Giwrgos Lampadaridis

326
1
5

score -2 · Answer 11 · answered Aug 31 '16 at 06:33

-2

Hi Guys i found a method add images to ionic v2

Create a images folder in "www" directory (www/images/) and add your all images in this path.

Then give your image path like this ex: for pages src="images/logo.png"

in CSS .ThemeColor{ background: url(/images/bg.png)};

That's it, works for me..

Thanks

answered Aug 31 '16 at 06:33

Bsm Hindujhan

1
1

I would not suggest adding the files directly into your build dir. They should be copied there as a part of the build process. – Musa Haidari Nov 13 '16 at 05:06
It will be replaced as soon as you do another build, and why is your css named "ThemeColor" when its referencing a image ? – LeRoy Dec 20 '16 at 11:28

Where do Images go in IONIC 2

11 Answers11

Linked