Images

Inline images

Images are inline by default and flow with the text:

<paragraph>
  <image src="data:image/png;base64,iVBOR..." width={914400} height={914400} />
</paragraph>

Dimensions are specified in EMUs (English Metric Units). 914400 EMU = 1 inch.

Convenience size props

Use widthPt and heightPt for point-based sizing:

<image src="data:image/png;base64,..." widthPt={144} heightPt={144} />

Data URIs

The src prop accepts base64-encoded data URIs:

import { readFileSync } from "node:fs";

const imageData = readFileSync("logo.png");
const base64 = imageData.toString("base64");
const src = `data:image/png;base64,${base64}`;

<image src={src} widthPt={72} heightPt={72} altText="Company logo" />

Supported formats

Format	format value
PNG	"png"
JPEG	"jpeg"
GIF	"gif"
BMP	"bmp"
SVG	"svg"

The format is typically auto-detected from the data URI MIME type. Use the format prop to specify it explicitly if needed.

Floating images

Set floating to position the image relative to the page:

<image
  src={src}
  widthPt={200}
  heightPt={150}
  floating
  wrapText="square"
  floatPosition={{
    horizontalPosition: {
      relative: "column",
      offset: 457200, // EMUs from left
    },
    verticalPosition: {
      relative: "paragraph",
      offset: 0,
    },
  }}
/>

Wrap modes

Value	Description
"square"	Text wraps in a rectangle around the image
"tight"	Text wraps tightly to the image shape
"through"	Text flows through transparent areas
"topAndBottom"	Text above and below only
"behind"	Image behind text
"inFront"	Image in front of text

Image props reference

Prop	Type	Description
src	string	Required. Data URI or file path
width	number	Width in EMUs
height	number	Height in EMUs
widthPt	number	Width in points
heightPt	number	Height in points
altText	string	Accessibility alt text
floating	boolean	Enable floating layout
wrapText	WrapText	Text wrapping mode
floatPosition	FloatingPosition	Positioning details
format	string	Image format hint