Images

Smelte includes convenience image component which is useful for lazyloading, but generally we recommend using Svelte Image.

<script>
  import { Image } from "smelte";

  const range = [...new Array(50)];
</script>


{#each range as _, i}
  <div class="my-8">
    <Image
      src="https://placeimg.com/{400 + i}/{300 + i}/animals"
      alt="Kitty {i}"
      height={400 + 1}
      width={300 +1}
    />
  </div>
{/each}