mirror of
https://github.com/aleksilassila/reiverr.git
synced 2026-04-18 16:53:18 +02:00
33 lines
494 B
Svelte
33 lines
494 B
Svelte
<script lang="ts">
|
|
import classNames from 'classnames';
|
|
|
|
export let src: string;
|
|
export let alt: string = '';
|
|
|
|
let loaded = false;
|
|
|
|
function handleLoad() {
|
|
loaded = true;
|
|
}
|
|
</script>
|
|
|
|
<div
|
|
class={classNames(
|
|
'transition-opacity duration-300 overflow-hidden',
|
|
{
|
|
'opacity-0': !loaded,
|
|
'opacity-100': loaded
|
|
},
|
|
$$restProps.class
|
|
)}
|
|
>
|
|
<img
|
|
{src}
|
|
{alt}
|
|
style="object-fit: cover; width: 100%; height: 100%;"
|
|
loading="lazy"
|
|
on:load={handleLoad}
|
|
/>
|
|
<slot />
|
|
</div>
|