# @react-pdf/image

> Parses the images in png or jpeg format for react-pdf document

Latest version **3.1.2** (published 2026-08-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install @react-pdf/image
pnpm add @react-pdf/image
yarn add @react-pdf/image
bun add @react-pdf/image
```

## Health

**Score 80/100 (A)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score; popular repo.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 3.1.2 |
| Published | 2026-08-23 |
| First published | 2020-07-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 74.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 16811 |
| Author | Diego Muracciole |
| Maintainers | diegomura |

## Links

- npm: https://www.npmjs.com/package/@react-pdf/image
- Repository: https://github.com/diegomura/react-pdf
- Homepage: https://github.com/diegomura/react-pdf#readme
- Issues: https://github.com/diegomura/react-pdf/issues
- npm.io page: https://npm.io/package/@react-pdf/image

## Dependencies (3)

- [png-js](https://npm.io/package/png-js.md) ^2.0.0
- [jay-peg](https://npm.io/package/jay-peg.md) ^1.1.1
- [@react-pdf/svg](https://npm.io/package/@react-pdf/svg.md) ^1.1.1

## Recent versions

- 3.1.2 (latest) — 2026-08-23
- 2.0.0-beta.16 (beta) — 2020-11-01
- 3.1.1 — 2026-08-08
- 3.1.0 — 2026-04-15
- 3.0.4 — 2025-12-29
- 3.0.3 — 2025-03-03
- 3.0.2 — 2025-02-17
- 3.0.1 — 2024-11-17
- 3.0.0 — 2024-09-23
- 2.3.6 — 2024-03-25
- 2.3.5 — 2024-03-15
- 2.3.4 — 2024-02-06
- 2.3.3 — 2024-02-06
- 2.3.2 — 2024-02-03
- 2.3.1 — 2024-01-20
- … 15 more at https://npm.io/package/@react-pdf/image/versions

## README

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @react-pdf/image

Image parsing and resolution library for react-pdf. Handles PNG and JPEG images from various sources including local files, remote URLs, base64 data URIs, buffers, and blobs.

## Installation

```bash
yarn add @react-pdf/image
```

## Usage

```js
import resolveImage from '@react-pdf/image';

const image = await resolveImage({ uri: './path/to/image.png' });

console.log(image.width); // Image width in pixels
console.log(image.height); // Image height in pixels
console.log(image.format); // 'png' or 'jpeg'
console.log(image.data); // Buffer containing image data
```

## Image Sources

The library supports multiple image source types:

### Local File

```js
const image = await resolveImage({ uri: './image.png' });
// or
const image = await resolveImage({ uri: '/absolute/path/to/image.jpg' });
```

> **Note:** Local file resolution is only available in Node.js environments.

### Remote URL

```js
const image = await resolveImage({ uri: 'https://example.com/image.png' });
```

With custom request options:

```js
const image = await resolveImage({
  uri: 'https://example.com/image.png',
  method: 'GET',
  headers: {
    Authorization: 'Bearer token',
  },
  body: null,
  credentials: 'include',
});
```

### Base64 Data URI

```js
const image = await resolveImage({
  uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==',
});
```

### Buffer

```js
import fs from 'fs';

const buffer = fs.readFileSync('./image.png');
const image = await resolveImage(buffer);
```

### Blob (Browser)

```js
const response = await fetch('https://example.com/image.png');
const blob = await response.blob();
const image = await resolveImage(blob);
```

### Data Object

```js
const image = await resolveImage({
  data: imageBuffer,
  format: 'png', // 'png', 'jpg', or 'jpeg'
});
```

## Caching

Images are cached by default to avoid redundant processing. You can disable caching for individual requests:

```js
const image = await resolveImage({ uri: './image.png' }, { cache: false });
```

The cache has a default limit of 30 entries and uses LRU (Least Recently Used) eviction.

## Types

### Image

The resolved image object:

```ts
interface Image {
  width: number;
  height: number;
  data: Buffer;
  format: 'jpeg' | 'png';
  key?: string;
}
```

### ImageSrc

All supported image source types:

```ts
type ImageSrc =
  | Blob
  | Buffer
  | DataImageSrc
  | LocalImageSrc
  | RemoteImageSrc
  | Base64ImageSrc;

type DataImageSrc = {
  data: Buffer;
  format: 'jpg' | 'jpeg' | 'png';
};

type LocalImageSrc = {
  uri: string;
  format?: 'jpg' | 'jpeg' | 'png';
};

type RemoteImageSrc = {
  uri: string;
  method?: 'GET' | 'HEAD' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
  headers?: Record<string, string>;
  format?: 'jpg' | 'jpeg' | 'png';
  body?: any;
  credentials?: 'omit' | 'same-origin' | 'include';
};

type Base64ImageSrc = {
  uri: `data:image${string}`;
};
```

## Supported Formats

- **PNG** - Portable Network Graphics
- **JPEG/JPG** - Joint Photographic Experts Group

JPEG images with EXIF orientation data are automatically handled, with width and height adjusted accordingly.

## License

MIT

---
_Source: https://npm.io/package/@react-pdf/image · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._