# Component/Image/ImagePreview

> Props: component-image-imagepreview.props.txt

## Examples


### Base

```tsx
{
  render: args => {
    return <Stack direction='column' width='100%' height='1000px'>
        <ImagePreview {...args} src={args.src ?? validImageSrc} />
      </Stack>;
  }
}
```

### Border Radius

```tsx
{
  render: args => {
    return <Stack direction='column' width='100%' height='1000px'>
        <ImagePreview {...args} src={args.src ?? validImageSrc} />
      </Stack>;
  },
  args: {
    ...Base.args,
    borderRadius: 100
  }
}
```

### Dark

```tsx
{
  render: args => {
    return <Stack direction='column' width='100%' height='1000px'>
        <ImagePreview {...args} src={args.src ?? validImageSrc} />
      </Stack>;
  },
  args: {
    backgroundDark: true,
    src: 'https://cf.res.s.alpha.zigzag.kr/pds/images/PostyWh.svg'
  }
}
```

### Fill

```tsx
{
  render: args => {
    return <Stack direction='column' width='100%' height='1000px'>
        <ImagePreview {...args} src={args.src ?? validImageSrc} />
      </Stack>;
  },
  args: {
    width: '100%',
    height: '100%',
    src: 'https://cf.res.s.alpha.zigzag.kr/pds/images/PostyWh.svg'
  }
}
```

### Onload Error

```tsx
{
  render: args => {
    return <Stack width='100%' gap={20}>
        <Stack direction='column' gap={8}>
          <BaseText kind='Body_13_Regular'>Small</BaseText>
          <ImagePreview {...args} size='small' src={inValidImageSrc} />
        </Stack>
        <Stack direction='column' gap={8}>
          <BaseText kind='Body_13_Regular'>Medium</BaseText>
          <ImagePreview {...args} size='medium' src={inValidImageSrc} />
        </Stack>
      </Stack>;
  }
}
```

### Size

```tsx
{
  render: args => {
    return <Stack width='100%' gap={20}>
        <Stack direction='column' gap={8}>
          <BaseText kind='Body_13_Regular'>Small</BaseText>
          <ImagePreview {...args} size='small' src={validImageSrc} />
        </Stack>
        <Stack direction='column' gap={8}>
          <BaseText kind='Body_13_Regular'>Medium</BaseText>
          <ImagePreview {...args} src={validImageSrc} />
        </Stack>
      </Stack>;
  }
}
```

### Sync Src

```tsx
{
  render: args => {
    const [src, setSrc] = React.useState<string>('');
    useEffect(() => {
      setTimeout(() => setSrc(validImageSrc), 1500);
    }, []);
    return <Stack direction='column' width='100%' height='100px'>
        <ImagePreview {...args} src={src} />
      </Stack>;
  }
}
```

### With Label

```tsx
{
  render: args => {
    return <Stack direction='column' width='100%' height='1000px'>
        <ImagePreview {...args} src={args.src ?? validImageSrc} />
      </Stack>;
  },
  args: {
    label: '대표 이미지'
  }
}
```