LazyImage

Media

Intersection Observer-based lazy loading with fade-in effect.

Live Demo

Images load when they scroll into the viewport. Scroll down to see lazy loading in action.

<script>
  import { LazyImage } from "jatui"
</script>

<LazyImage />

Prop	Type	Default	Description
`src`	`string`	`-`	Image source URL
`alt`	`string`	`-`	Alt text
`aspectRatio`	`string \| null`	`null`	CSS aspect ratio
`fit`	`"cover" \| "contain" \| "fill"`	`"cover"`	Object fit
`width`	`number \| null`	`null`	Image width
`height`	`number \| null`	`null`	Image height