# ImageNode

Image node render ra `<img>`. Không chứa node con.

## Resolved name

`Image`

## Configurable props

### Top-level props

| Prop | Type | Description |
| --- | --- | --- |
| `src` | `string` | URL ảnh |
| `alt` | `string` | Alt text cho SEO và accessibility |
| `loading` | `'eager' \| 'lazy'` | Preload: `'eager'` = tải ngay, `'lazy'` = lazy load (default) |

### `sx` props

```ts
sx?: {
  // size
  width?: number | string
  height?: number | string    // chỉ hiển thị khi aspectRatio là 'auto'

  // aspect ratio
  aspectRatio?: 'auto' | '1 / 1' | '16 / 9' | '9 / 16' | string  // ví dụ custom: '4 / 3'

  // object fit (áp dụng toàn breakpoint — không responsive)
  objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'

  // spacing
  paddingTop?: number
  paddingRight?: number
  paddingBottom?: number
  paddingLeft?: number
  marginTop?: number
  marginRight?: number
  marginBottom?: number
  marginLeft?: number

  // border
  borderStyle?: string
  borderColor?: string
  borderTopWidth?: number
  borderRightWidth?: number
  borderBottomWidth?: number
  borderLeftWidth?: number
  borderTopLeftRadius?: number | string
  borderTopRightRadius?: number | string
  borderBottomRightRadius?: number | string
  borderBottomLeftRadius?: number | string

  // responsive overrides
  sm?: { /* same keys above */ }
  md?: { /* same keys above */ }
  lg?: { /* same keys above */ }
}
```

> Khi `aspectRatio` được set (khác `auto`), prop `height` bị ẩn trong inspector vì chiều cao tự tính từ ratio.

## Usage

```tsx
import { ImageNode } from '@janbox/storefront-builder';

// Ảnh cơ bản
<ImageNode
  src="https://example.com/photo.jpg"
  alt="Product photo"
  loading="lazy"
  sx={{ width: '100%', objectFit: 'cover' }}
/>

// Tỉ lệ 16:9, full width
<ImageNode
  src="https://example.com/banner.jpg"
  alt="Banner"
  sx={{
    width: '100%',
    aspectRatio: '16 / 9',
    objectFit: 'cover',
  }}
/>

// Thumbnail vuông, responsive width
<ImageNode
  src="https://example.com/thumb.jpg"
  alt="Thumbnail"
  sx={{
    width: 80,
    aspectRatio: '1 / 1',
    objectFit: 'cover',
    borderTopLeftRadius: 8,
    borderTopRightRadius: 8,
    borderBottomLeftRadius: 8,
    borderBottomRightRadius: 8,
    md: { width: 120 },
  }}
/>
```

## Rules

- **Canvas**: no — không chứa node con.