Image

A component for displaying images with support for preview and error handling.

Basic Usage

Click the image to view a full-screen preview with zoom, pan, and rotate controls.

 Loading... 
Preview
<prism-image 
  src="https://images.unsplash.com/photo-1682695794816-7b9da18ed470?q=80&w=800&auto=format&fit=crop" 
  width="200" 
  height="200">
</prism-image>

Error State

Shows a fallback when the image fails to load.

 Loading... 
<prism-image 
  src="https://error-image-url.example.com/broken.png"
  fallback="https://images.unsplash.com/photo-1682695794816-7b9da18ed470?q=80&w=800&auto=format&fit=crop"
  width="200" 
  height="200"
  [preview]="false">
</prism-image>

NameTypeDefaultDescription
srcstring-Image source
altstring''Image alt text
widthstring | number'100'Image width
heightstring | number'100'Image height
fallbackstring | nullnullLoad failure fallback image URL
previewbooleantrueWhether to support preview

Name	Type	Default	Description
`src`	`string`	`-`	Image source
`alt`	`string`	`''`	Image alt text
`width`	`string \| number`	`'100'`	Image width
`height`	`string \| number`	`'100'`	Image height
`fallback`	`string \| null`	`null`	Load failure fallback image URL
`preview`	`boolean`	`true`	Whether to support preview