Image

Setup

<script>
  import { Img } from "svelte-5-ui-lib";
</script>

Interactive Image Builder

sample 1
<Img src='/images/examples/content-gallery-1.png'/>
Warning: the caption is using @html.

Examples

An alt text
This is a caption
<script>
  import { ImgEnhanced } from 'svelte-5-ui-lib';
  import MyImage from "./garnished.webp?enhanced";
</script>

<ImgEnhanced src={MyImage} alt="An alt text" caption="This is a caption" />

Component data