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?

Answer 1

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%;
}

Answer 2

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

Answer 3

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>

Answer 4

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.

Answer 5

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