# Image

## Example

```svelte
<script>
	import { ImageContainer } from '@foxui/all';

	import cute from '$lib/assets/images/cute.webp';
	import cute2 from '$lib/assets/images/cute2.webp';
</script>

<ImageContainer src={cute} alt="Such a cute animal" containerClasses="not-prose max-w-64" />

<h3>Overlay theme color</h3>

<ImageContainer
	src={cute2}
	alt="Another cute animal"
	useThemeColor={true}
	containerClasses="max-w-44 not-prose"
/>

<h3>Show normal image on hover</h3>

<ImageContainer
	src={cute2}
	alt="Another cute animal"
	useThemeColor={true}
	containerClasses="max-w-44 not-prose"
	showNormalOnHover={true}
/>
```

## Documentation

## Usage

```svelte
<ImageContainer src="/image.jpg" alt="Alt tag" />

<ImageContainer src="/image.jpg" alt="Alt tag" useThemeColor showNormalOnHover />
```

## API Reference

### Image
An image component with optional theme color overlay and blur effects.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| src | `string` | `-` | The image source URL. |
| alt | `string` | `-` | Alt text for the image. (required) |
| useThemeColor | `boolean` | `false` | Whether to apply a theme color overlay to the image. |
| blur | `boolean` | `true` | Whether to apply a blur loading effect. |
| showNormalOnHover | `boolean` | `false` | When useThemeColor is true, shows the original image on hover. |
| containerClasses | `string` | `-` | Additional CSS classes for the image container. |
| class | `string` | `-` | Additional CSS classes for the image element. |
| ref | `HTMLImageElement` | `-` | The underlying image DOM element. (bindable) |