Interactive Component Editor

No example data found in JSDoc @example

Add an @example block to enable interactive editing

Live preview - changes update automatically

Component Information

Name: Image

Category: media

Path: src/components/media/Image.astro

Description: Image - Optimized image component with flexible source handling

JSDoc Props Documentation

src?: string - Direct image source URL (preferred method for simple images)

image?: object - Strapi image object for CMS integration (backwards compatibility)

alt: string - Alternative text for accessibility and SEO (required)

width?: number - Image width in pixels (optional)

height?: number - Image height in pixels (optional)

class?: string - Additional CSS classes to apply (optional)

type?: 'listing' | 'hero' | 'thumbnail' | 'full' - Preset image type with predefined sizing (optional)

loading?: 'lazy' | 'eager' - Loading behavior for performance optimization (optional)

priority?: boolean - Shorthand for eager loading critical images (optional)

showPlaceholder?: boolean - Whether to show placeholder when no image available (optional)

placeholderClass?: string - CSS classes for placeholder styling (optional)

Documentation

For detailed usage instructions, props, and examples, check the JSDoc comments in the component file or see the complete component documentation.