I have lots of device gallery local images path, which i am retrieving using Ionic PhotoLibrary. Then i am trying to display those images using ionic slider as below :
<ion-slides>
<ion-slide *ngFor="let img of images">
<img [src]="img.photoURL | cdvPhotoLibrary"/>
</ion-slide>
</ion-slides>
Where,
images is the array of the LibraryItem. Then photoURL contains the cdvfilepath:// of the images.
But, the slider working proper only if there are 2 to 3 images. When number of images increase app will crash.
Please give me solution !!!
You can use ng-lazyload-image library.
install it via npm install ng-lazyload-image --save
and then declare it in app.module.ts as
import { LazyLoadImageModule, intersectionObserverPreset } from 'ng-lazyload-image';
and add it in imports
LazyLoadImageModule.forRoot({
preset: intersectionObserverPreset
})
Then just add [lazyLoad]="image" in place of src="image"
where you want to lazyload image.
Tested it myself and it works perfectly.
Related
I need to display external images but image loading only works well in
ionic serve
My code is like this:
<img [src]="user?.img.url" />
or
<div *ngIf="user">
<img [src]="user.img.url" />
</div>
but the images are not been loaded in mobile
if I copy the link contained in user.img.url and write a code like this:
<img src="'https://res.cloudinary.com/ddon9fx1n/image/upload/v1567797308/rvnpdvy9dsj9ws8tiatj.jpg'" />
then it always works in ionic serve or in mobile
With some images all the above code works... I am using Cloudinary to storage media files
I am using ion-Slides to show the selected image from the gallery and swipe them horizontally and it is working good but I want to show the last selected image on the screen.
I tried using slideTo() and it causing the type error.
For more clarity: I am running a loop where I push selected images from gallery in with base64 conversion into an array and pass it in an image tag to show images on the HTML screen.
any help would be great.
#ViewChild('slides', { static: false }) slider: IonSlides;
I faced a similar problem.
Had to change static from true to false.
You can use ionSlidesDidLoad event to make sure ion-slide has loaded.
subscribe for the event in your html file like following sample:
<ion-content>
<ion-slides (ionSlidesDidLoad)="slidesLoaded($event)">
<ion-slide>
<h1>Slide 1</h1>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
</ion-slides>
</ion-content>
and in your ts file add the following method:
public slidesLoaded($event) {
//move to slide number 2
$event.target.slideTo(2);
}
This event is available in Ionic 4 and later.
I am building an Ionic2 app (actually I am learning), and am trying to apply custom css to my component, however it is not successful.
My app folder structure is as following:
My app.core.css:
#import "../pages/start/start";
#import "../pages/farmList/farmList";
#import "../pages/slider/slider";
#import "../pages/farm/farm";
My slider.component.ts
<ion-slides #mySlider [options]="mySlideOptions" id="mySlides">
<ion-slide >
<div padding>
<h1>Welcome to Swarms app</h1>
<p>Here you can view, manage and manipulate all your data</p>
</div>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>Slide 3</h1>
<button (click)="goToHome()">Start</button>
</ion-slide>
</ion-slides>
I am trying to add some properties in slider.scss but it has no effect. How can apply some styles to it?
Also, I created a folder 'img' like www/build/img and put few images in there, but on whenever I restart my ionic app with ionic serve, the folder is vanished, WHY?
UPDATE: First problem is solved, it was a simple typo in components where it had to be styleUrls:['/slider.scss']and not styleUrls:['/slider.css']
Add a folder css in the src/assets folder. Put your css file there. In the src/index.html file, add this line
<link href="assets/css/yourCssFileName.css" rel="stylesheet">
Then you can refer to anything in the css file in your other pages as what you normally do with web pages.
Also, I created a folder 'img' like www/build/img and put few images
in there, but on whenever I restart my ionic app with ionic serve, the
folder is vanished, WHY?
When you run ionic serve all the javascript and styles files are compiled and put together (among other tasks) in your build folder, and that's why if you put somethig there, is deleted.
In order to avoid that, you should put your images in www\images and then reference them in your code by doing:
<img src="images/myImage.png" />
======================
EDIT:
You can find more information about what's going on when you run ionic serve (and also emulate, deploy and build) by taking a look at your gulpfile.js:
/**
* Ionic hooks
* Add ':before' or ':after' to any Ionic project command name to run the specified
* tasks before or after the command.
*/
gulp.task('serve:before', ['watch']);
gulp.task('emulate:before', ['build']);
gulp.task('deploy:before', ['build']);
gulp.task('build:before', ['build']);
And in the lasts lines of code of the gulpfile.js you can see this:
gulp.task('clean', function(){
return del('www/build');
});
Which is what causes the build folder to be deleted.
I am working on android project with ionic framework.
I have www\templates\home.html in which I am using images for item icon.
my view code home.html
<ion-content>
<div class="row gray">
<div class="col"><div class="abc"></div>
Opening Balance</div>
</div>
</ion-content>
my css in style.css:
.abc{
background: url('../img/icon.png');
}
Anyone have any suggestions?
Thanks in advance
make sure the file path is correct
make sure the permissions on the file are allowed. If you copied the image from somewhere, the permissions may not allow you to use it on your project.
I'm working on a site, where I have 3 images of an item displayed, but there are can be more than 3 images of an item. I want to use fancybox to display them, but I couldn't figure out how it could be done.
I know how to create a gallery "manually", but I don't know how to add images manually to an existing gallery which is identified by a class.
Thanks.
It doesn't look like there are any methods in Fancybox for programatically adding an image to a gallery. Perhaps you could contact the author and request it, or you could modify the script.
You will need to recreate the fancybox gallery each time you add a new image. As simshaun said, there is no method for adding new images to an existing fancybox gallery.
From the Fancybox example page, you need to have the same ref parameter on each image in order to create the gallery.
<div style="display: none;"> <a class="fancybox-effects-c"
href="images/test.jpg" data-fancybox-group="groupname" ><img
src="test.jpg" alt="" /></a> </div>
This should work as the image will be there and added to the fancybox but just not shown.