As you can see from the images, the pager does not show in the IOS version of my Ionic App. The code must be right because its there in Android. Is there something I am missing?
<ion-slides pager="true" scrollbar="true">
Android
IOS
I am not sure if its ideal, but seems when I copied the options from here:
https://ionicframework.com/docs/api/slides#coverflow it worked. I assumed it would work with simple setup as I didn't need any other options...
It seems that the order in which components are rendered can affect the ios-slides pager in iOS, so you could try to make sure that it always renders at the end.
One workaround would be initializing a variable after the view is entered:
ionViewDidEnter() {
this.viewEntered = true;
}
And use it in your ion-slides to decide when to show it:
<ion-slides pager="true" *ngIf="viewEntered">
...
</ion-slides>
I can't find the way to close an app in Ionic 5 system. Looks like the way to do it in Ionic 4 is not working for Ionic 5.
Is it possible to do?
closeApp() {
this.platform.backButton.subscribeWithPriority(999999, () => {
navigator['app'].exitApp();
// or trigger any action you want to achieve
}) //Amended missing a closing bracket
}
Using IONIC 4 ion-searchbar, I am trying to add cancelButtonText as below which it is not working.
//first way
<ion-searchbar showCancelButton="true" cancelButtonText="Clear"></ion-searchbar>
//second way
<ion-searchbar showCancelButton cancelButtonText="Clear"></ion-searchbar>
Can anyone please provide any solution for this ?
If you are testing the cancelButtonText in Android platform it wont be working because in the ionic documentation of ion-searchbar they have mentioned that the cancelButtonText is only for the IOS platform and they have given the mode as IOS or md for the attributes.So the attributes will be worked based on the mode.
Also I have created the stackblitz so that you can check the example
https://stackblitz.com/edit/ionic-n93fh7?file=pages%2Ftabs%2Ftabs.html
When you change the mode to md in the example cancelButtonText is not working.
You can refer the documentation here ion-searchbar
I have just installed a new Ionic project - Ionic v2.0.0-beta.32
Im looking to add a background image to the home page of the fresh install, is there anyone that could show me how i go about this? All i can find is information for Ionic 1 and things seems quite different.
From what ive found, the image needs to be the following dimensions
2800px x 2800px
But apart from that i cant find any other tutorials.
This is my first Ionic project so be gentle
Thanks you guys
The image can be any size.
go to app/theme/app.core.scss and add the following code
ion-content{
background-image: url('img/background.jpg');
}
This is assuming that the name of your image file is background.jpg and is stored in www/img/ folder.
Hope this helps
UPDATE Ionic 3.x
Go to app/app.scss and add the following code
ion-content {
background-image: url('assets/img/background.jpg');
}
This is assuming that the name of your image file is background.jpg and is stored in assets/img folder.
For Ionic V4 they use some new switch in the scss file. This worked for me:
ion-content {
--background: url('../../assets/Welcome-screen.png') no-repeat 50% 10%;
}
In ionic 2 the background image work only if you put the img folder into the build folder. If you go to inspect on the mage url it will show you that i finding for it in build/img/bg.jpg try to put folder img into build folder.
www/build/img
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:
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)
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.
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>
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%;
}
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.
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
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
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.
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.
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
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