Components
Image
Image component with LQIP/palette placeholder
Image
An image component with LQIP (blur-up) or palette color placeholder support. Provides automatic srcSet generation and fade transition on load.
Basic Usage
import { Image } from '@01.software/sdk/components'
function ProductCard({ product }) {
return (
<Image
image={product.thumbnail}
placeholder="blur"
sizes="(max-width: 768px) 100vw, 50vw"
/>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
image | ImageData | — | Payload image document (required) |
width | number | — | CSS pixel width |
dpr | number | 1 | Device pixel ratio |
placeholder | 'blur' | 'color' | 'none' | 'blur' | Placeholder strategy |
className | string | — | Container CSS class |
style | CSSProperties | — | Container style |
imgClassName | string | — | <img> CSS class |
imgStyle | CSSProperties | — | <img> style |
sizes | string | — | HTML sizes attribute |
loading | 'lazy' | 'eager' | 'lazy' | Loading strategy |
onLoad | () => void | — | Image load complete callback |
objectFit | 'cover' | 'contain' | 'fill' | 'none' | 'scale-down' | 'cover' | object-fit |
Placeholder Strategies
blur: Overlays a blurred LQIP image, fades out on load. Falls back to palette color if LQIP is unavailable.color: Uses palette color as background.none: No placeholder.
Image Utilities
Utility functions for image processing. Can be used independently without the Image component.
import {
getImageUrl,
getImageSrcSet,
getImageLqip,
getImagePalette,
getImagePlaceholderStyle,
IMAGE_SIZES,
} from '@01.software/sdk'| Function | Returns | Description |
|---|---|---|
getImageUrl(image, displayWidth, dpr?) | string | Select optimal image URL for display width |
getImageSrcSet(image) | string | Generate HTML srcset attribute string |
getImageLqip(image) | string | undefined | LQIP data URL |
getImagePalette(image) | ImagePalette | undefined | 6-color palette (vibrant, muted, darkVibrant, darkMuted, lightVibrant, lightMuted) |
getImagePlaceholderStyle(image, options?) | CSSProperties | Inline CSS styles for placeholder |
IMAGE_SIZES | [384, 768, 1536] | Pre-generated image size breakpoints |
Usage Example
// Select optimal URL
const url = getImageUrl(product.thumbnail, 400, 2) // 400px @ 2x
// Custom <img> tag
<img
src={getImageUrl(image, 768)}
srcSet={getImageSrcSet(image)}
sizes="(max-width: 768px) 100vw, 50vw"
style={getImagePlaceholderStyle(image, { type: 'color' })}
/>