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 click-through URL — wraps the rendered <img> in an <a href>. Prefer `props.action` (NodeAction array) for new code.
-
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
-
action
object
Optional NodeAction(s) that fire on image click — array of action entries (or a single object). Supports link, show-hide, open-modal, etc. Each entry may carry `conversion: { provider, eventName, sendTo?, value?, currency? }` to fire a Google Ads / GA4 / Meta event.