← Back to documentation
Image
An image with built-in optimization capabilities.
Information
Plan: Personal
Properties
| Property | Type | Default |
|---|---|---|
| Link | null | "/images/empty.jpg" |
| Alternative text | string | |
| Role | enum<string> | "hero" |
| Width | string | "100%" |
| Maximum width | string | "100%" |
| Height | string | "auto" |
| Maximum height | string | "100%" |
| Flexbox grow | string | "1" |
| Fill container | boolean | false |
| Align self | enum<string> | "auto" |
| Justify self | enum<string> | "auto" |
| Position | enum<string> | "relative" |
| Top | string | "auto" |
| Right | string | "auto" |
| Bottom | string | "auto" |
| Left | string | "auto" |
| Z-index | string | "auto" |
| Aspect ratio | enum<string> | "auto" |
| Object fit | string | "contain" |
| Object position | enum<string> | "center" |
| Background color | string | "var(--pc-semantic-surface-base-secondary)" |
| Cursor | string | "auto" |
| Opacity | string | "1" |
| Border color | string | "var(--pc-semantic-border-secondary)" |
| Border width | string | "5px" |
| Border radius | string | "5px" |
| Box shadow | string | "var(--pc-semantic-shadow-sm)" |
| Responsive sizes | string | "100vw" |
| Image quality | number | 75 |
| High priority (LCP) | boolean | false |
| Loading behavior | enum<string> | "lazy" |
| Fetch priority | enum<string> | "auto" |
| Decoding | enum<string> | "async" |
| Placeholder | enum<string> | "empty" |
| Blur data URL | string | "" |
| Referrer policy | string | "no-referrer" |
| Disable optimization | boolean | false |
| Is visible | boolean | true |
| Selectors | array | [] |