ng-image-slider icon indicating copy to clipboard operation
ng-image-slider copied to clipboard

Angular 10 : Images not loading with assigned with width

Open viratgangurde opened this issue 3 years ago • 2 comments

I am unable to load images with specified width(500). Please find below code snippets,

TS code imageObject = [{ image: 'assets/img/Model_Combination/sample_01.png' }, { image: 'assets/img/Model_Combination/sample_02.png'
}, { image: 'assets/img/Model_Combination/sample_03.png'

},{ image: 'assets/img/Model_Combination/sample_04.png' }];

HTML

Kindly suggest, thanks in advanced.

viratgangurde avatar Nov 05 '20 05:11 viratgangurde

I missed to mentioned thumbImage property, the image loading issue resolved. But width issue not settled, kindly help.

viratgangurde avatar Nov 05 '20 10:11 viratgangurde

I missed to mentioned thumbImage property, the image loading issue resolved. But width issue not settled, kindly help.

@viratgangurde you must add the images size as a parameter in ng-image-slider.

Example: In .ts imagesize: any; //declare variable inside class (...) this.imageSize = { width: '100%', height: 'auto', space: 3 } //set image default and spaces.

In .html <ng-image-slider animationSpeed="0.5" [imageSize]="imageSize" [images]="imagesGallery" [manageImageRatio]="true">

Note for the field [manageImageRatio]="true", which says if the images should maintain their aspect ratio

Cafnio avatar Mar 20 '21 21:03 Cafnio