Image

import { Image } from '@fibrous/semi-ui-react';

export default function ImageDemo() {
    return <Image width={360} height={200} alt="Abstract colorful artwork" src="/assets/root-web-sites/abstract.jpg" />;
}

import { IconUploadError } from '@fibrous/semi-icons-react';
import { Image } from '@fibrous/semi-ui-react';

export default function ImageDemo() {
    return (
        <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
            <span>加载失败默认样式</span>
            <Image width={200} height={200} src="https://load-error.jpeg" alt="加载失败的图片" />
            <br />
            <span>自定义加载失败占位图</span>
            <Image width={200} height={200} src="https://load-error.jpeg" alt="加载失败的图片" fallback={<IconUploadError style={{ fontSize: 50 }} />} />
        </div>
    );
}

import React from 'react';
import { Image, Button } from '@fibrous/semi-ui-react';

export default function ImageDemo() {
    const [timestamp, setTimestamp] = React.useState('');
    return (
        <>
            <Image width={300} height={200} alt="Abstract colorful artwork" src={`/assets/root-web-sites/abstract-big.png?${timestamp}`} placeholder={<Image src="/assets/root-web-sites/abstract-small.jpeg" width={300} height={200} alt="" preview={false} />} />
            <br />
            <Button
                theme="solid"
                onClick={() => {
                    setTimestamp(String(Date.now()));
                }}
                style={{ marginTop: 10 }}
            >
                Reload
            </Button>
        </>
    );
}

import { Image } from '@fibrous/semi-ui-react';

export default function ImageDemo() {
    return (
        <Image
            width={300}
            height={200}
            alt="Abstract colorful artwork"
            src="/assets/root-web-sites/abstract-small.jpeg"
            preview={{
                src: '/assets/root-web-sites/abstract-big.png',
            }}
        />
    );
}

import { useMemo } from 'react';
import { Image, ImagePreview } from '@fibrous/semi-ui-react';

export default function ImageDemo() {
    const srcList = useMemo(() => ['/assets/root-web-sites/abstract.jpg', '/assets/root-web-sites/sky.jpg', '/assets/root-web-sites/greenleaf.jpg', '/assets/root-web-sites/colorful.jpg'], []);

    return (
        <ImagePreview>
            {srcList.map((src, index) => {
                return <Image key={index} src={src} width={200} alt={`lamp${index + 1}`} style={{ marginRight: 5 }} />;
            })}
        </ImagePreview>
    );
}

import { useMemo, useCallback, useState } from 'react';
import { ImagePreview, Button } from '@fibrous/semi-ui-react';

export default function ImageDemo() {
    const srcList = useMemo(() => ['/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, setVisible1] = useState(false);
    const [visible2, setVisible2] = useState(false);

    const visibleChange1 = useCallback((v: boolean) => {
        setVisible1(v);
    }, []);

    const visibleChange2 = useCallback((v: boolean) => {
        setVisible2(v);
    }, []);

    const onButton1Click = useCallback(() => {
        setVisible1(true);
    }, []);

    const onButton2Click = useCallback(() => {
        setVisible2(true);
    }, []);

    return (
        <>
            <Button onClick={onButton1Click}>Preview single Image</Button>
            <ImagePreview src="/assets/root-web-sites/sky.jpg" visible={visible1} onVisibleChange={visibleChange1} />
            <br />
            <Button onClick={onButton2Click} style={{ marginTop: 20 }}>
                Preview multiple Images
            </Button>
            <ImagePreview src={srcList} previewTitle="Scenery" visible={visible2} onVisibleChange={visibleChange2} />
        </>
    );
}

import { useMemo } from 'react';
import { Image, ImagePreview } from '@fibrous/semi-ui-react';

export default function ImageDemo() {
    const srcList = useMemo(() => ['/assets/root-web-sites/abstract.jpg', '/assets/root-web-sites/sky.jpg', '/assets/root-web-sites/greenleaf.jpg'], []);

    return (
        <>
            <div
                id="container"
                style={{
                    height: 400,
                    position: 'relative',
                }}
            >
                <ImagePreview
                    getPopupContainer={() => {
                        const node = document.getElementById('container') as HTMLElement;
                        return node;
                    }}
                    style={{
                        height: '100%',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                    }}
                >
                    {srcList.map((src, index) => {
                        return <Image key={index} src={src} width={200} alt={`lamp${index + 1}`} style={{ marginRight: 5 }} />;
                    })}
                </ImagePreview>
            </div>
        </>
    );
}

import { useMemo, useCallback } from 'react';
import { IconChevronLeft, IconChevronRight, IconMinus, IconPlus, IconRotate, IconDownload, IconRealSizeStroked, IconWindowAdaptionStroked } from '@fibrous/semi-icons-react';
import { Image, ImagePreview, Button, type ImagePreviewMenuProps } from '@fibrous/semi-ui-react';

export default function ImageDemo() {
    const srcList = useMemo(() => ['/assets/root-web-sites/abstract.jpg', '/assets/root-web-sites/sky.jpg', '/assets/root-web-sites/greenleaf.jpg'], []);

    const renderPreviewMenu = useCallback(({ ratio, disabledPrev, disabledNext, disabledZoomIn, disabledZoomOut, disableDownload, onDownload, onNext, onPrev, onRotateLeft, onRatioClick, onZoomIn, onZoomOut }: ImagePreviewMenuProps) => {
        return (
            <div
                style={{
                    background: 'grey',
                    height: 40,
                    width: 280,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'space-around',
                    borderRadius: 3,
                }}
            >
                <Button aria-label="上一张" icon={<IconChevronLeft size="large" />} type="tertiary" onClick={onPrev} disabled={disabledPrev} />
                <Button aria-label="下一张" icon={<IconChevronRight size="large" />} type="tertiary" onClick={onNext} disabled={disabledNext} />
                <Button aria-label="缩小" icon={<IconMinus size="large" />} type="tertiary" onClick={onZoomOut} disabled={disabledZoomOut} />
                <Button aria-label="放大" icon={<IconPlus size="large" />} type="tertiary" onClick={onZoomIn} disabled={disabledZoomIn} />
                <Button aria-label={ratio === 'adaptation' ? '原始尺寸' : '适应页面'} icon={ratio === 'adaptation' ? <IconRealSizeStroked size="large" /> : <IconWindowAdaptionStroked size="large" />} type="tertiary" onClick={onRatioClick} />
                <Button aria-label="旋转" icon={<IconRotate size="large" />} type="tertiary" onClick={onRotateLeft} />
                <Button aria-label="下载" icon={<IconDownload size="large" />} type="tertiary" onClick={onDownload} disabled={disableDownload} />
            </div>
        );
    }, []);

    return (
        <ImagePreview renderPreviewMenu={renderPreviewMenu}>
            {srcList.map((src, index) => {
                return <Image key={index} src={src} width={200} alt={`lamp${index + 1}`} style={{ marginRight: 5 }} />;
            })}
        </ImagePreview>
    );
}

import { useMemo, useCallback } from 'react';
import { IconInfoCircle } from '@fibrous/semi-icons-react';
import { Image, ImagePreview, Divider, Tooltip, type ImagePreviewMenuProps } from '@fibrous/semi-ui-react';

export default function ImageDemo() {
    const srcList = useMemo(() => ['/assets/root-web-sites/abstract.jpg', '/assets/root-web-sites/sky.jpg', '/assets/root-web-sites/greenleaf.jpg'], []);

    const renderPreviewMenu = useCallback(({ menuItems = [] }: ImagePreviewMenuProps) => {
        const customNode = (
            <Tooltip content="我是一个自定义操作">
                <IconInfoCircle size="large" />
            </Tooltip>
        );
        return (
            <div
                style={{
                    display: 'flex',
                    backgroundColor: 'rgba(0, 0, 0, 0.75)',
                    alignItems: 'center',
                    padding: '5px 16px',
                    borderRadius: 4,
                }}
            >
                {menuItems.slice(0, 3)}
                <Divider layout="vertical" />
                {menuItems.slice(3, 7)}
                <Divider layout="vertical" />
                {menuItems.slice(7)}
                <Divider layout="vertical" />
                {customNode}
            </div>
        );
    }, []);

    return (
        <>
            <ImagePreview renderPreviewMenu={renderPreviewMenu}>
                {srcList.map((src, index) => (
                    <Image key={index} src={src} width={200} alt={`lamp${index + 1}`} />
                ))}
            </ImagePreview>
        </>
    );
}

import { useMemo } from 'react';
import { Image, ImagePreview } from '@fibrous/semi-ui-react';

export default function ImageDemo() {
    const srcList = useMemo(() => ['/assets/root-web-sites/abstract.jpg', '/assets/root-web-sites/sky.jpg'], []);

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