Components

Image

The <Image> component renders an image from a file path, URL, or data source. Supports PNG, JPEG, and SVG formats.

Props

Prop	Type	Default	Description
`src`*	`string \| Buffer`	—	Image source. Path, URL, base64 data URI, or Buffer.
`style`	`Style`	—	Standard style object. Common: width, height, objectFit, borderRadius.
`fixed`	`boolean`	—	Repeat on every page.
`debug`	`boolean`	—	Show debug borders.
`cache`	`boolean`	`true`	Whether to cache the decoded image.

Source Types

vue

<template>
  <Document>
    <Page size="A4">
      <!-- Local path -->
      <Image src="/assets/logo.png" />

      <!-- Remote URL -->
      <Image src="https://example.com/photo.jpg" />

      <!-- Base64 Data URI -->
      <Image src="data:image/svg+xml;base64,PHN2ZyB..." />
    </Page>
  </Document>
</template>

Object Fit

vue

<template>
  <Document>
    <Page size="A4">
      <Image
        src="/photo.jpg"
        :style="{
          width: 200,
          height: 200,
          objectFit: 'cover',
          objectPositionX: 0.5,
          objectPositionY: 0.3,
          borderRadius: 8,
        }"
      />
    </Page>
  </Document>
</template>