Cardchild
Common pattern to use Image at top of product cardsImage
Responsive image component with aspect ratio control, loading states, and error fallbacks. Handles image display with consistent styling.
Setup
import { Image } from '@fragments-sdk/ui';Examples
Default
Basic image display
Loading preview...
Aspect Ratios
Different aspect ratio options
Loading preview...
Rounded Corners
Border radius options
Loading preview...
With Fallback
Fallback content for loading/error states
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
srcRequired | string | Not set | Image source URL |
altRequired | string | Not set | Alt text for accessibility (required) |
aspectRatio | enum1:14:316:921:9auto | auto | Aspect ratio of the image container |
objectFit | enumcovercontainfillnone | cover | How the image fits within its container |
width | union | Not set | Width of the image container |
height | union | Not set | Height of the image container |
rounded | enumnonesmmdlgfull | none | Border radius |
fallback | node | Not set | Content to show while loading or on error |
className | string | Not set | Additional class name |
style | object | Not set | Inline styles |
imgProps | object | Not set | Additional props for the underlying img element (except src/alt/size/style/events) |
onImageLoad | function | Not set | Called when the underlying img element loads |
onImageError | function | Not set | Called when the underlying img element fails to load |
Usage Guidelines
When to use
- Displaying product images in cards or grids
- Hero images with specific aspect ratios
- User-uploaded content that may fail to load
- Thumbnails in lists or galleries
When not to use
- User avatars (use Avatar component)
- Icons or symbols (use Icon component)
- Background images (use CSS background-image)
- SVG illustrations (use inline SVG or Image component)
Best practices
- Always provide meaningful alt text for accessibility
- Use appropriate aspect ratios for consistent layouts
- Provide fallback content for failed loads
- Use objectFit="contain" for logos to preserve aspect ratio
- Use imgProps / onImageLoad / onImageError when you need lower-level img control
Accessibility
- Alt text is required and must describe the image content
- Decorative images should have empty alt=""
- Avoid text in images; if necessary, describe the text in alt
- Ensure sufficient contrast between image and surrounding content