Image
The image component is used to incorporate graphics, photos, and illustrations into the application. It supports various file formats, such as JPEG, PNG, and SVG. Images can be static or interactive, and they're often used to enhance the visual appeal, convey messages, or display product photos. Features like lazy loading, resizing, and alignment are important for performance and layout.
Examples
Various examples showcasing different configurations of the component
Examples
Placeholder
Property
Value
Src
https://unsplash.it/2000/3000?random=1
Aspect Ratios
Placeholder
Property
Value
Aspect ratio
16/10
Variants
Placeholder
Property
Value
Variant
CIRCLE
Properties
Each component can be customized and configured based on product requirements. You can modify the component on Canonic by clicking on the component and opening the configuration panel.
Property
Description
Default Value
Type
Src
The source URL for the image.
https://unsplash.it/2000/3000
Image
Aspect ratio
The aspect ratio of the image.
16:9
String
Orientation
The orientation of the image.
Horizontal
String
Variant
The variant of the image.
Rounded
String
Fit
The fit of the image. (Cover, contain, fit etc.)
Cover
String
Did you find what you were looking for?
👍
👎
What went wrong?
Need more help?We have a thriving Discordcommunity that can help you with all things Canonic. →