> ## Documentation Index
> Fetch the complete documentation index at: https://react-docx.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Image

Embed images with sizing, aspect ratio, and cropping.

```tsx theme={"dark"}
<Image src="./photo.jpg" width="3in" height="2in" />
```

***

## Props

| Prop        | Type               | Description       |
| ----------- | ------------------ | ----------------- |
| `src`       | `string`           | File path or URL  |
| `width`     | `MeasurementValue` | Image width       |
| `height`    | `MeasurementValue` | Image height      |
| `alt`       | `string`           | Alt text          |
| `className` | `string`           | Tailwind classes  |
| `id`        | `string`           | Unique identifier |

***

## Loading images

### Local files

```tsx theme={"dark"}
<Image src="./images/logo.png" width="2in" />
<Image src="/absolute/path/to/image.jpg" width="3in" />
```

### Remote URLs

```tsx theme={"dark"}
<Image src="https://example.com/photo.jpg" width="4in" />
```

***

## Supported formats

* PNG
* JPEG
* GIF (static)
* BMP
* WebP

***

## Sizing

### Units

```tsx theme={"dark"}
<Image src="photo.jpg" width="3in" />        // Inches
<Image src="photo.jpg" width="5cm" />        // Centimeters
<Image src="photo.jpg" width="50mm" />       // Millimeters
<Image src="photo.jpg" width="200px" />      // Pixels
<Image src="photo.jpg" width="72pt" />       // Points
<Image src="photo.jpg" width={2} />          // Number = inches
```

### Width only

Height calculated from original aspect ratio:

```tsx theme={"dark"}
<Image src="photo.jpg" width="4in" />
```

### Height only

Width calculated from original aspect ratio:

```tsx theme={"dark"}
<Image src="photo.jpg" height="3in" />
```

### Both

Explicit dimensions (may stretch):

```tsx theme={"dark"}
<Image src="photo.jpg" width="4in" height="3in" />
```

### No dimensions

Uses original image size:

```tsx theme={"dark"}
<Image src="photo.jpg" />
```

***

## Aspect ratio

Control aspect ratio with Tailwind classes:

```tsx theme={"dark"}
// Square
<Image src="photo.jpg" width="2in" className="aspect-square" />

// 16:9 video
<Image src="photo.jpg" width="4in" className="aspect-video" />

// Custom ratio
<Image src="photo.jpg" width="3in" className="aspect-[4/3]" />
<Image src="photo.jpg" width="3in" className="aspect-[2/1]" />
```

***

## Object fit

Control how image fills the space:

### Cover (crop to fill)

```tsx theme={"dark"}
<Image
  src="photo.jpg"
  width="2in"
  height="2in"
  className="object-cover"
/>
```

Crops image to fill dimensions. Maintains aspect ratio, removes overflow.

### Contain (fit inside)

```tsx theme={"dark"}
<Image
  src="photo.jpg"
  width="2in"
  height="2in"
  className="object-contain"
/>
```

Scales to fit within dimensions. May have empty space.

### Default (stretch)

```tsx theme={"dark"}
<Image src="photo.jpg" width="2in" height="2in" />
```

Stretches to fill. May distort image.

***

## Common patterns

### Logo in header

```tsx theme={"dark"}
<Section>
  <Section.Header>
    <Paragraph>
      <Image src="./logo.png" width="1in" />
    </Paragraph>
  </Section.Header>
</Section>
```

### Product image

```tsx theme={"dark"}
<Paragraph className="text-center">
  <Image
    src="./product.jpg"
    width="4in"
    className="aspect-square object-cover"
    alt="Product photo"
  />
</Paragraph>
```

### Thumbnail grid (in table)

```tsx theme={"dark"}
<Table>
  <Tbody>
    <Tr>
      <Td className="p-2">
        <Image src="./img1.jpg" width="1.5in" className="aspect-square object-cover" />
      </Td>
      <Td className="p-2">
        <Image src="./img2.jpg" width="1.5in" className="aspect-square object-cover" />
      </Td>
      <Td className="p-2">
        <Image src="./img3.jpg" width="1.5in" className="aspect-square object-cover" />
      </Td>
    </Tr>
  </Tbody>
</Table>
```

### Screenshot with border

```tsx theme={"dark"}
<Paragraph className="text-center mt-4">
  <Image
    src="./screenshot.png"
    width="5in"
    alt="Application screenshot"
  />
</Paragraph>
<Paragraph className="text-center text-sm text-gray-500">
  Figure 1: Application dashboard
</Paragraph>
```

***

## Limitations

* Inline positioning only (no text wrapping)
* No floating images
* No rotation or transforms
* No filters or effects
* No SVG support
* No animated GIFs (static frame only)