diff options
| author | Fuwn <[email protected]> | 2024-04-21 19:51:49 -0700 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-04-21 19:51:49 -0700 |
| commit | eebeaa378d49cc8adb597d00fd05bcc314779888 (patch) | |
| tree | d2862e4f952525280a341e44810c261548a07a3f /src/lib/FallbackImage.svelte | |
| parent | refactor(TextTransition): move to Layout (diff) | |
| download | due.moe-eebeaa378d49cc8adb597d00fd05bcc314779888.tar.xz due.moe-eebeaa378d49cc8adb597d00fd05bcc314779888.zip | |
refactor(lib): move componenets to modules
Diffstat (limited to 'src/lib/FallbackImage.svelte')
| -rw-r--r-- | src/lib/FallbackImage.svelte | 41 |
1 files changed, 0 insertions, 41 deletions
diff --git a/src/lib/FallbackImage.svelte b/src/lib/FallbackImage.svelte deleted file mode 100644 index 3f5e8758..00000000 --- a/src/lib/FallbackImage.svelte +++ /dev/null @@ -1,41 +0,0 @@ -<script lang="ts"> - export let source: string | undefined | null; - export let alternative: string | undefined | null; - export let fallback: string | undefined | null; - export let maxReplaceCount = 1; - export let replaceDelay = 1000; - export let error = 'https://i2.kym-cdn.com/photos/images/newsfeed/000/290/992/0aa.jpg'; - export let hideOnError = false; - export let style = ''; - - let replaceCount = 0; - - const delayedReplace = (event: Event, image: string | undefined | null) => { - if (replaceCount >= maxReplaceCount) return; - - setTimeout(() => { - (event.target as HTMLImageElement).src = image || ''; - - replaceCount += 1; - }, replaceDelay); - }; -</script> - -{#if replaceCount < maxReplaceCount} - <img - src={source} - alt={alternative} - loading="lazy" - class="badge" - on:error={(e) => delayedReplace(e, fallback)} - {style} - /> -{:else if !hideOnError} - <img src={error} alt="Not found" loading="lazy" class="badge" /> -{/if} - -<style> - .badge { - border-radius: 8px; - } -</style> |