Image

<script setup lang="ts">
    import { Image } from '@fibrous/semi-ui-vue';
</script>

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

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

<template>
    <div :style="{ display: 'flex', alignItems: 'center', flexDirection: '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">
            <template #fallback>
                <IconUploadError :style="{ fontSize: '50px' }" />
            </template>
        </Image>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { Button, Image } from '@fibrous/semi-ui-vue';

    const timestamp = ref('');
</script>

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

<script setup lang="ts">
    import { Image } from '@fibrous/semi-ui-vue';

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

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

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

    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>

<template>
    <ImagePreview>
        <Image v-for="(src, index) in srcList" :key="src" :alt="`lamp${index + 1}`" :src="src" :style="{ marginRight: '5px' }" :width="200" />
    </ImagePreview>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { Button, ImagePreview } from '@fibrous/semi-ui-vue';

    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'];

    const visible1 = ref(false);
    const visible2 = ref(false);
</script>

<template>
    <Button @click="visible1 = true">Preview single Image</Button>
    <ImagePreview v-model:visible="visible1" src="/assets/root-web-sites/sky.jpg" />
    <br />
    <Button :style="{ marginTop: '20px' }" @click="visible2 = true">Preview multiple Images</Button>
    <ImagePreview v-model:visible="visible2" previewTitle="Scenery" :src="srcList" />
</template>

<script setup lang="ts">
    import { useTemplateRef } from 'vue';
    import { Image, ImagePreview } from '@fibrous/semi-ui-vue';

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

    const container = useTemplateRef<HTMLDivElement>('container');
    // called when the preview opens, after the container is mounted
    const getPopupContainer = () => container.value as HTMLElement;
</script>

<template>
    <div ref="container" :style="{ height: '400px', position: 'relative' }">
        <ImagePreview :getPopupContainer="getPopupContainer" :style="{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }">
            <Image v-for="(src, index) in srcList" :key="src" :alt="`lamp${index + 1}`" :src="src" :style="{ marginRight: '5px' }" :width="200" />
        </ImagePreview>
    </div>
</template>

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

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

<template>
    <ImagePreview>
        <template #previewMenu="{ ratio, disabledPrev, disabledNext, disabledZoomIn, disabledZoomOut, disableDownload, onDownload, onNext, onPrev, onRotateLeft, onRatioClick, onZoomIn, onZoomOut }">
            <div
                :style="{
                    background: 'grey',
                    height: '40px',
                    width: '280px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'space-around',
                    borderRadius: '3px',
                }"
            >
                <Button aria-label="上一张" :disabled="disabledPrev" type="tertiary" @click="onPrev">
                    <template #icon>
                        <IconChevronLeft size="large" />
                    </template>
                </Button>
                <Button aria-label="下一张" :disabled="disabledNext" type="tertiary" @click="onNext">
                    <template #icon>
                        <IconChevronRight size="large" />
                    </template>
                </Button>
                <Button aria-label="缩小" :disabled="disabledZoomOut" type="tertiary" @click="onZoomOut">
                    <template #icon>
                        <IconMinus size="large" />
                    </template>
                </Button>
                <Button aria-label="放大" :disabled="disabledZoomIn" type="tertiary" @click="onZoomIn">
                    <template #icon>
                        <IconPlus size="large" />
                    </template>
                </Button>
                <Button :aria-label="ratio === 'adaptation' ? '原始尺寸' : '适应页面'" type="tertiary" @click="onRatioClick">
                    <template #icon>
                        <IconRealSizeStroked v-if="ratio === 'adaptation'" size="large" />
                        <IconWindowAdaptionStroked v-else size="large" />
                    </template>
                </Button>
                <Button aria-label="旋转" type="tertiary" @click="onRotateLeft">
                    <template #icon>
                        <IconRotate size="large" />
                    </template>
                </Button>
                <Button aria-label="下载" :disabled="disableDownload" type="tertiary" @click="onDownload">
                    <template #icon>
                        <IconDownload size="large" />
                    </template>
                </Button>
            </div>
        </template>
        <Image v-for="(src, index) in srcList" :key="src" :alt="`lamp${index + 1}`" :src="src" :style="{ marginRight: '5px' }" :width="200" />
    </ImagePreview>
</template>

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

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

<template>
    <ImagePreview>
        <template #previewMenu="{ menuItems }">
            <div
                :style="{
                    display: 'flex',
                    backgroundColor: 'rgba(0, 0, 0, 0.75)',
                    alignItems: 'center',
                    padding: '5px 16px',
                    borderRadius: '4px',
                }"
            >
                <component :is="item" v-for="(item, index) in menuItems.slice(0, 3)" :key="`a${index}`" />
                <Divider layout="vertical" />
                <component :is="item" v-for="(item, index) in menuItems.slice(3, 7)" :key="`b${index}`" />
                <Divider layout="vertical" />
                <component :is="item" v-for="(item, index) in menuItems.slice(7)" :key="`c${index}`" />
                <Divider layout="vertical" />
                <Tooltip content="我是一个自定义操作">
                    <IconInfoCircle size="large" />
                </Tooltip>
            </div>
        </template>
        <Image v-for="(src, index) in srcList" :key="src" :alt="`lamp${index + 1}`" :src="src" :width="200" />
    </ImagePreview>
</template>

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

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

<template>
    <ImagePreview>
        <template #title="{ title }">
            <div
                :style="{
                    width: '100%',
                    height: '100%',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                }"
            >
                <span :style="{ background: 'black', padding: '0 10px' }">自定义标题：{{ title }}</span>
            </div>
        </template>
        <div>
            <Image v-for="(src, index) in srcList" :key="src" :alt="`lamp${index + 1}`" :preview="{ previewTitle: `lamp${index + 1}` }" :src="src" :style="{ marginRight: '5px' }" :width="200" />
        </div>
    </ImagePreview>
</template>