ALPHA: API may change at any time
Svelte components for responsive images and image previews (incl. BlurHash)
<script>
import { Image } from '@bztes/svelte-rip';
let imgData = {
src: 'static/robert-katzki-unsplash_org.jpg',
previewSrc: 'static/robert-katzki-unsplash_32.jpg',
formats: [
{ src: 'static/robert-katzki-unsplash_400.jpg', width: 400 },
{ src: 'static/robert-katzki-unsplash_800.jpg', width: 800 },
{ src: 'static/robert-katzki-unsplash_1000.jpg', width: 1000 },
]
}:
</script>
<Image data={imgData} />
<script>
import { Image, blurhashToData } from '@bztes/svelte-rip';
let imgData = {
src: 'static/robert-katzki-unsplash_org.jpg',
hash: 'LGF5]+Yk^6#M@-5c,1J5@[or[Q6.',
formats: [ ... ]
};
</script>
<Image data={imgData} previewSrc={blurhashToData} />
<script>
import { Image, Stack } from '@bztes/svelte-rip';
// ...
</script>
<Stack fixed>
<Image slot="image" data={imgData} />
<h1>Hello Bello</h1>
</Stack>
import { ImageDefaults } from '@bztes/svelte-rip';
ImageDefaults.src = (data) => (data ? 'static/' + data.url : null);
ImageDefaults.alt = (data) => data?.alternativeText;