Image
Reactive load an image in the browser.
Usage
<script>
import { image } from "@sveu/browser"
const { loading } = image({
src: "img-url",
})
</script><script>
import { image } from "@sveu/browser"
const { loading } = image({
src: "img-url",
})
</script>svelte
Example
<script>
import { image } from "@sveu/browser"
import { browser } from "@sveu/shared"
const src =
"https://i.ibb.co/JjL8tSt/final-fantasy-xiii-2-lightning-2560x1440.jpg"
const { loading } = image({
src,
})
</script>
<div class="grid place-items-center">
{#if !$loading}
<img
src="{src}"
alt="FF XIII-2 Lightning"
loading="lazy"
class="rounded-2xl h-66.25 w-90" />
{:else if !browser}
<!-- fallback if js is disabled -->
<img
src="{src}"
alt="FF XIII-2 Lightning"
loading="lazy"
class="rounded-2xl h-66.25 w-90" />
{:else}
<div style="background-color: #f1c91a" class="rounded-2xl h-66.25 w-90">
</div>
{/if}
</div><script>
import { image } from "@sveu/browser"
import { browser } from "@sveu/shared"
const src =
"https://i.ibb.co/JjL8tSt/final-fantasy-xiii-2-lightning-2560x1440.jpg"
const { loading } = image({
src,
})
</script>
<div class="grid place-items-center">
{#if !$loading}
<img
src="{src}"
alt="FF XIII-2 Lightning"
loading="lazy"
class="rounded-2xl h-66.25 w-90" />
{:else if !browser}
<!-- fallback if js is disabled -->
<img
src="{src}"
alt="FF XIII-2 Lightning"
loading="lazy"
class="rounded-2xl h-66.25 w-90" />
{:else}
<div style="background-color: #f1c91a" class="rounded-2xl h-66.25 w-90">
</div>
{/if}
</div>svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Click fold/expand code
API
Arguments
| Name | Description | Type | Required |
|---|---|---|---|
| options | Read options | ImageOptions | Yes |
| asyncStateOptions | Read options | AsyncStateOptions | No |
Options
| Name | Description | Type |
|---|---|---|
| src | Address of the resource | string |
| srcset | Images to use in different situations | string |
| sizes | Image sizes for different page layouts | string |
| alt | Image alternative information | string |
| class | Image classes | string |
| loading | Image loading | HTMLImageElement["loading"] |
| crossOrigin | Image CORS settings | string |
| referrerPolicy | Referrer policy for fetch | HTMLImageElement["referrerPolicy"] |