By default, synapsPics directive sets the image url for src and/or srcset attribute. If you want to use image as a background you can use as-background attribute.
[lazy] attribute also accepts a boolean value. So you can write some conditions for defining when image will be loaded. This feature is handy when you want to use it with a slider/carousel component for example.
<divclass="slide"*ngFor="let slide of slides; let i = index">
<img[synapsPics]="imageUrl"[lazy]="activeSlide === i">
</div>
Reference for manipulation parameters
For the original image below available manipulation parameters and example results are here.
The image is resized so that it takes up as much space as possible within a bounding box defined by the given width and height parameters. The original aspect ratio is retained and all of the original image is visible. <img [synapsPics]="'/anon/image_bla.jpg'" width="80" height="80" crop="fit">
crop
scale
Change the size of the image exactly to the given width and height without necessarily retaining the original aspect ratio: all original image parts are visible but might be stretched or shrunk. <img [synapsPics]="'/anon/image_bla.jpg'" width="80" height="80" crop="scale">
crop
fill
Same as the 'fit' mode but only if the original image is larger than the given limit (width and height), in which case the image is scaled down so that it takes up as much space as possible within a bounding box defined by the given width and height parameters. The original aspect ratio is retained and all of the original image is visible. <img [synapsPics]="'/anon/image_bla.jpg'" width="80" height="80" crop="fill">
crop
pad
Resize the image to fill the given width and height while retaining the original aspect ratio. If the proportions of the original image do not match the given width and height, padding is added to the image to reach the required size. <img [synapsPics]="'/anon/image_bla.jpg'" width="80" height="80" crop="pad">
crop
limit
Same as the 'fit' mode but only if the original image is larger than the given limit (width and height). <img [synapsPics]="'/anon/image_bla.jpg'" width="80" height="80" crop="limit">
quality
integer (default 80)
Output quality. 1 to 100. <img [synapsPics]="'/anon/image_bla.jpg'" width="80" height="80" q="40">
gravity
center (default)
The focus to the center of the image when cropping. <img [synapsPics]="'/anon/image_bla.jpg'" width="80" height="80" crop="fill" gravity="center">
gravity
northwest
The focus to the northwest of the image when cropping. <img [synapsPics]="'/anon/image_bla.jpg'" width="80" height="80" crop="fill" gravity="northwest">
gravity
northeast
North east corner (top right). <img [synapsPics]="'/anon/image_bla.jpg'" width="80" height="80" crop="fill" gravity="northeast">
gravity
southeast
South east corner (bottom right). <img [synapsPics]="'/anon/image_bla.jpg'" width="80" height="80" crop="fill" gravity="southeast">
gravity
southwest
South west corner (bottom left). <img [synapsPics]="'/anon/image_bla.jpg'" width="80" height="80" crop="fill" gravity="southwest">
gravity
north
North center part (top center). <img [synapsPics]="'/anon/image_bla.jpg'" width="80" height="80" crop="fill" gravity="north">
gravity
west
Middle west part (left). <img [synapsPics]="'/anon/image_bla.jpg'" width="80" height="80" crop="fill" gravity="west">
gravity
east
Middle east part (right). <img [synapsPics]="'/anon/image_bla.jpg'" width="80" height="80" crop="fill" gravity="east">
gravity
south
Middle south part (bottom center). <img [synapsPics]="'/anon/image_bla.jpg'" width="80" height="80" crop="fill" gravity="south">
The Tidelift Subscription provides access to a continuously curated stream of human-researched and maintainer-verified data on open source packages and their licenses, releases, vulnerabilities, and development practices.