lazy-svelte-image Svelte Themes

Lazy Svelte Image

npm package for img tag with laoding and many features

lazy-image-loader

A custom Image component/tag like component with customizations, loader ...

Installing the Package

If you're seeing this, you've probably already done this step. Congrats!

npm i lazy-svelte-image

Usage

Once you've installed you can import the package and use just like <img> . an exaple is given below

import { Image } from 'lazy-svelte-image'


<Image src="" alt="" />

# or

<Image> <!-- slot--> </Image>

Customization

Currenlty you can provide custom loader and broken image icon as slot. use slot like how you use it in svelte.

Props

  • disableLoader - disable all loaders
  • disableBroken - disable all broken view
  • backgroundColor - set custom background color for default broken/loader

Slots

For custom broken Images/Icons

<span slot="broken">
  <!-- provide code here -->
</span>

For custom Loaders

<span slot="loader">
  <!-- provide loader code here  -->
</span>
Looking forward for feature requests and usages 😃..

Top categories

Loading Svelte Themes