Svelte-blurhash NPM

svelte-blurhash

lazy loading with a blurhash image.

Install

npm install --save blurhash svelte-blurhash

Usage

<script>
  import BlurhashImage from 'svelte-blurhash';
</script>

<BlurhashImage
        src={"https://blurha.sh/assets/images/img1.jpg"}
        hash={"LEHV6nWB2yk8pyoJadR*.7kCMdnj"}
        width={269}
        height={173}
/>

Options

fadeDuration: fade animation duration. default 500(ms).

<BlurhashImage
        src={"https://blurha.sh/assets/images/img1.jpg"}
        hash={"LEHV6nWB2yk8pyoJadR*.7kCMdnj"}
        width={269}
        height={173}
        fadeDuration={600} />

Picture Tag

<BlurhashPicture
                src={"https://www.1-firststep.com/samplephp/jpg-webp-avif/image/1000.jpg"}
                hash={"LEHV6nWB2yk8pyoJadR*.7kCMdnj"}
                width={320}
                height={206}
                fadeDuration={800}
        >
                <source
                        srcset="https://www.1-firststep.com/samplephp/jpg-webp-avif/image/1000.webp"
                        type="image/webp"
                />
                <source
                        srcset="https://www.1-firststep.com/samplephp/jpg-webp-avif/image/1000.avif"
                        type="image/avif"
                />
</BlurhashPicture>