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?
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:
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With