Image

<script lang="ts">
    import { Image } from '@fibrae/semi-ui-svelte';
</script>

<Image alt="Abstract colorful artwork" height={200} src="/assets/root-web-sites/abstract.jpg" width={360} />

<script lang="ts">
    import { IconUploadError } from '@fibrae/semi-icons-svelte';
    import { Image } from '@fibrae/semi-ui-svelte';
</script>

<div style="display: flex; align-items: center; flex-direction: column">
    <span>加载失败默认样式</span>
    <Image alt="加载失败的图片" height={200} src="https://load-error.jpeg" width={200} />
    <br />
    <span>自定义加载失败占位图</span>
    <Image alt="加载失败的图片" height={200} src="https://load-error.jpeg" width={200}>
        {#snippet fallback()}
            <IconUploadError style="font-size: 50px" />
        {/snippet}
    </Image>
</div>

<script lang="ts">
    import { Button, Image } from '@fibrae/semi-ui-svelte';

    let timestamp = $state('');
</script>

<Image alt="Abstract colorful artwork" height={200} src="/assets/root-web-sites/abstract-big.png?{timestamp}" width={300}>
    {#snippet placeholder()}
        <Image alt="" height={200} preview={false} src="/assets/root-web-sites/abstract-small.jpeg" width={300} />
    {/snippet}
</Image>
<br />
<Button style="margin-top: 10px" theme="solid" onclick={() => (timestamp = String(Date.now()))}>Reload</Button>

<script lang="ts">
    import { Image } from '@fibrae/semi-ui-svelte';

    const preview = {
        src: '/assets/root-web-sites/abstract-big.png',
    };
</script>

<Image alt="Abstract colorful artwork" height={200} {preview} src="/assets/root-web-sites/abstract-small.jpeg" width={300} />

<script lang="ts">
    import { Image, ImagePreview } from '@fibrae/semi-ui-svelte';

    const srcList = ['/assets/root-web-sites/abstract.jpg', '/assets/root-web-sites/sky.jpg', '/assets/root-web-sites/greenleaf.jpg', '/assets/root-web-sites/colorful.jpg'];
</script>

<ImagePreview src={srcList}>
    {#each srcList as src, index (src)}
        <Image alt="lamp{index + 1}" {src} style="margin-right: 5px" width={200} />
    {/each}
</ImagePreview>

<script lang="ts">
    import { Button, ImagePreview } from '@fibrae/semi-ui-svelte';

    const srcList = ['/assets/root-web-sites/abstract.jpg', '/assets/root-web-sites/sky.jpg', '/assets/root-web-sites/greenleaf.jpg', '/assets/root-web-sites/colorful.jpg'];

    let visible1 = $state(false);
    let visible2 = $state(false);
</script>

<Button onclick={() => (visible1 = true)}>Preview single Image</Button>
<ImagePreview bind:visible={visible1} src="/assets/root-web-sites/sky.jpg" />
<br />
<Button style="margin-top: 20px" onclick={() => (visible2 = true)}>Preview multiple Images</Button>
<ImagePreview bind:visible={visible2} previewTitle="Scenery" src={srcList} />

<script lang="ts">
    import { Image, ImagePreview } from '@fibrae/semi-ui-svelte';

    const srcList = ['/assets/root-web-sites/abstract.jpg', '/assets/root-web-sites/sky.jpg', '/assets/root-web-sites/greenleaf.jpg'];

    let container = $state<HTMLDivElement>();
    // called when the preview opens, after the container is mounted
    const getPopupContainer = () => container as HTMLElement;
</script>

<div bind:this={container} style="height: 400px; position: relative">
    <ImagePreview {getPopupContainer} src={srcList} style="height: 100%; display: flex; align-items: center; justify-content: center">
        {#each srcList as src, index (src)}
            <Image alt="lamp{index + 1}" {src} style="margin-right: 5px" width={200} />
        {/each}
    </ImagePreview>
</div>

<script lang="ts">
    import { IconChevronLeft, IconChevronRight, IconDownload, IconMinus, IconPlus, IconRealSizeStroked, IconRotate, IconWindowAdaptionStroked } from '@fibrae/semi-icons-svelte';
    import { Button, Image, ImagePreview } from '@fibrae/semi-ui-svelte';

    const srcList = ['/assets/root-web-sites/abstract.jpg', '/assets/root-web-sites/sky.jpg', '/assets/root-web-sites/greenleaf.jpg'];
</script>

<ImagePreview src={srcList}>
    {#snippet previewMenu({ ratio, disabledPrev, disabledNext, disabledZoomIn, disabledZoomOut, disableDownload, onDownload, onNext, onPrev, onRotateLeft, onRatioClick, onZoomIn, onZoomOut })}
        <div style="background: grey; height: 40px; width: 280px; display: flex; align-items: center; justify-content: space-around; border-radius: 3px">
            <Button aria-label="上一张" disabled={disabledPrev} type="tertiary" onclick={onPrev}>
                {#snippet icon()}
                    <IconChevronLeft size="large" />
                {/snippet}
            </Button>
            <Button aria-label="下一张" disabled={disabledNext} type="tertiary" onclick={onNext}>
                {#snippet icon()}
                    <IconChevronRight size="large" />
                {/snippet}
            </Button>
            <Button aria-label="缩小" disabled={disabledZoomOut} type="tertiary" onclick={onZoomOut}>
                {#snippet icon()}
                    <IconMinus size="large" />
                {/snippet}
            </Button>
            <Button aria-label="放大" disabled={disabledZoomIn} type="tertiary" onclick={onZoomIn}>
                {#snippet icon()}
                    <IconPlus size="large" />
                {/snippet}
            </Button>
            <Button aria-label={ratio === 'adaptation' ? '原始尺寸' : '适应页面'} type="tertiary" onclick={onRatioClick}>
                {#snippet icon()}
                    {#if ratio === 'adaptation'}
                        <IconRealSizeStroked size="large" />
                    {:else}
                        <IconWindowAdaptionStroked size="large" />
                    {/if}
                {/snippet}
            </Button>
            <Button aria-label="旋转" type="tertiary" onclick={onRotateLeft}>
                {#snippet icon()}
                    <IconRotate size="large" />
                {/snippet}
            </Button>
            <Button aria-label="下载" disabled={disableDownload} type="tertiary" onclick={onDownload}>
                {#snippet icon()}
                    <IconDownload size="large" />
                {/snippet}
            </Button>
        </div>
    {/snippet}
    {#each srcList as src, index (src)}
        <Image alt="lamp{index + 1}" {src} style="margin-right: 5px" width={200} />
    {/each}
</ImagePreview>

<script lang="ts">
    import { IconInfoCircle } from '@fibrae/semi-icons-svelte';
    import { Divider, Image, ImagePreview, Tooltip } from '@fibrae/semi-ui-svelte';

    const srcList = ['/assets/root-web-sites/abstract.jpg', '/assets/root-web-sites/sky.jpg', '/assets/root-web-sites/greenleaf.jpg'];
</script>

<ImagePreview src={srcList}>
    {#snippet previewMenu({ menuItems })}
        <div style="display: flex; background-color: rgba(0, 0, 0, 0.75); align-items: center; padding: 5px 16px; border-radius: 4px">
            {@render menuItems()}
            <Divider layout="vertical" />
            <Tooltip>
                {#snippet content()}
                    我是一个自定义操作
                {/snippet}
                <IconInfoCircle size="large" />
            </Tooltip>
        </div>
    {/snippet}
    {#each srcList as src, index (src)}
        <Image alt="lamp{index + 1}" {src} width={200} />
    {/each}
</ImagePreview>

<script lang="ts">
    import { Image, ImagePreview } from '@fibrae/semi-ui-svelte';

    const srcList = ['/assets/root-web-sites/abstract.jpg', '/assets/root-web-sites/sky.jpg'];
    const titles = srcList.map((_, index) => `lamp${index + 1}`);
</script>

<ImagePreview src={srcList} {titles}>
    {#snippet title({ title })}
        <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center">
            <span style="background: black; padding: 0 10px">自定义标题：{title}</span>
        </div>
    {/snippet}
    <div>
        {#each srcList as src, index (src)}
            <Image alt={titles[index]} {src} style="margin-right: 5px" width={200} />
        {/each}
    </div>
</ImagePreview>