Image - React Docx

Embed images with sizing, aspect ratio, and cropping.

<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

<Image src="./images/logo.png" width="2in" />
<Image src="/absolute/path/to/image.jpg" width="3in" />

Remote URLs

<Image src="https://example.com/photo.jpg" width="4in" />

Supported formats

PNG
JPEG
GIF (static)
BMP
WebP

Sizing

Units

<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:

<Image src="photo.jpg" width="4in" />

Height only

Width calculated from original aspect ratio:

<Image src="photo.jpg" height="3in" />

Both

Explicit dimensions (may stretch):

<Image src="photo.jpg" width="4in" height="3in" />

No dimensions

Uses original image size:

<Image src="photo.jpg" />

Aspect ratio

Control aspect ratio with Tailwind classes:

// 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)

<Image
  src="photo.jpg"
  width="2in"
  height="2in"
  className="object-cover"
/>

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

Contain (fit inside)

<Image
  src="photo.jpg"
  width="2in"
  height="2in"
  className="object-contain"
/>

Scales to fit within dimensions. May have empty space.

Default (stretch)

<Image src="photo.jpg" width="2in" height="2in" />

Stretches to fill. May distort image.

Common patterns

Logo in header

<Section>
  <Section.Header>
    <Paragraph>
      <Image src="./logo.png" width="1in" />
    </Paragraph>
  </Section.Header>
</Section>

Product image

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

Thumbnail grid (in table)

<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

<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)

​Props

​Loading images

​Local files

​Remote URLs

​Supported formats

​Sizing

​Units

​Width only

​Height only

​Both

​No dimensions

​Aspect ratio

​Object fit

​Cover (crop to fill)

​Contain (fit inside)

​Default (stretch)

​Common patterns

​Logo in header

​Product image

​Thumbnail grid (in table)

​Screenshot with border

​Limitations