Image

Image component with responsive image support

Required Props: id, src

Structure

All styling goes in props.className as a single Tailwind utility string. Non-class props (text, src, alt, etc.) stay on their own keys. root.animation for scroll effects.

Properties

Property	Type	Description	Examples
`src`*required	string	Image URL or path when not using media library id (matches <img src>)	`https://images.unsplash.com/photo-...`
`videoId`	string	Media library asset id; when set, image src/metadata resolve from ROOT pageMedia	-
`type`	string cdn \| url \| svg \| upload	Image source type. Use 'url' for direct image URLs (e.g. Unsplash), 'cdn' for media library references, 'svg' for inline SVG, 'upload' for uploaded files Default: `"cdn"`	-
`url`	object	Optional separate URL field (see also content)	-
`alt`	string	Alt text for accessibility	`Product screenshot`
`title`	string	Image title attribute	-
`fetchPriority`	string high \| low \| auto \|	Fetch priority for loading (matches ImageProps) Default: `"low"`	-
`loading`	string lazy \| eager	Loading strategy	-
`canDelete`	boolean	-	-
`canEditName`	boolean	-	-
`custom`	object	-	-
`className`	string	Tailwind utility classes string. Mobile-first: unprefixed = base, md: = 768px+, sm: = 640px+, lg: = 1024px+. Includes layout, spacing, surface design, and typography.	`flex flex-col gap-space-sm py-space-lg px-container-x md:flex-rowbg-primary text-primary-content rounded-box py-3.5 px-6 font-semibold`
`urlTarget`	string	-	-
`role`	string	-	-
`aria-label`	string	-	-
`aria-hidden`	string	-	-
`aria-describedby`	string	-	-
`aria-live`	string polite \| assertive \| off	-	-
`background`	object	-	-
`root`	object	-	-