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

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

Answer 2

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)

Answer 3

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.

Answer 4

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.

Answer 5

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.

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