Documentation Index
Fetch the complete documentation index at: https://mintlify.com/bpampuch/pdfmake/llms.txt
Use this file to discover all available pages before exploring further.
pdfmake supports JPEG and PNG images. An image node is the simplest content object with a visual payload — a single image property pointing to the source, plus optional sizing and positioning properties. Images can be sourced from local file paths (Node.js), inline data URLs, or named keys in the document’s images dictionary.
Basic image node
const docDefinition = {
content: [
'If no width/height/fit is provided, image original size will be used',
{
image: 'images/sampleImage.jpg'
}
]
};
pdfmake (since it is based on pdfkit) supports JPEG and PNG formats only. SVG images require the separate svg-to-pdfkit package — see the Vectors & SVG page.
Image sources
File path (Node.js)
Pass a relative or absolute file system path. Use setLocalAccessPolicy to restrict which paths are allowed.
Data URL
Inline the image as a data:image/png;base64,... or data:image/jpeg;base64,... string.
VFS / images dictionary
Register a key in docDefinition.images and reference it by name in the image property.
Data URL example
const testImageDataUrl = 'data:image/png;base64,iVBORw0KGgoAAAANS...';
const docDefinition = {
content: [
'Images can be provided in dataURL format',
{
image: testImageDataUrl,
width: 200
}
]
};
Named images dictionary
const docDefinition = {
content: [
'Image referenced by name from the images dictionary',
{ image: 'bee', width: 200 },
'Image loaded from a URL and referenced by name',
{ image: 'snow', height: 200 }
],
images: {
bee: 'data:image/png;base64,iVBORw0KGgoAAAANS...',
snow: 'https://picsum.photos/seed/picsum/200/300'
}
};
Size control
Fixed width (proportional height)
{
image: 'images/sampleImage.jpg',
width: 150
}
Fixed width and height (stretches the image)
{
image: 'images/sampleImage.jpg',
width: 150,
height: 150
}
Fit (preserve aspect ratio inside a box)
fit accepts [maxWidth, maxHeight] and scales the image to fit within both dimensions while preserving its aspect ratio:
{
image: 'images/sampleImage.jpg',
fit: [100, 100]
}
Cover (fill a box, crop if needed)
cover fills the given box completely. An optional align and valign control which part of the image remains visible when cropping occurs:
{
image: 'images/sampleImage.jpg',
cover: { width: 100, height: 100, valign: 'bottom', align: 'right' }
}
// Scale to fit inside 100×100, letterboxed
{ image: 'images/sampleImage.jpg', fit: [100, 100] }
Opacity
{
image: 'images/sampleImage.jpg',
width: 150,
opacity: 0.5
}
Alignment
alignment positions the image horizontally within the available content width:
{ image: 'images/sampleImage.jpg', width: 150, alignment: 'center' }
{ image: 'images/sampleImage.jpg', width: 150, alignment: 'right' }
Absolute positioning
Use absolutePosition to place an image at a precise page coordinate, independent of the normal content flow. The surrounding content continues flowing as if the image is not there.
const docDefinition = {
content: [
{ image: 'bee', width: 50, height: 50, absolutePosition: { x: 100, y: 100 } },
{ image: 'bee', width: 50, height: 50, absolutePosition: { x: 150, y: 150 } },
{ image: 'bee', width: 50, height: 50, absolutePosition: { x: 200, y: 200 } },
{ image: 'bee', width: 50, height: 50, absolutePosition: { x: 250, y: 150 } },
{ image: 'bee', width: 50, height: 50, absolutePosition: { x: 300, y: 100 } },
{ text: 'You can put images at any position' }
],
images: { bee: 'data:image/png;base64,...' }
};
absolutePosition also works on text nodes and table nodes — it is not exclusive to images.
Hyperlink on an image
Set link to a URL to make the image clickable in PDF viewers that support hyperlinks:
{
image: 'images/sampleImage.jpg',
width: 150,
link: 'https://example.com'
}
Images in tables
Images work inside table cells with the same fit and cover properties:
{
table: {
widths: [200, 'auto', 'auto'],
body: [
[
{ image: 'images/sampleImage.jpg', cover: { width: 100, height: 100 } },
{ image: 'images/sampleImage.jpg', cover: { width: 100, height: 100 } },
{ image: 'images/sampleImage.jpg', cover: { width: 100, height: 100 } }
],
[
{ image: 'images/sampleImage.jpg', fit: [100, 100] },
{ image: 'images/sampleImage.jpg', fit: [100, 100] },
{ image: 'images/sampleImage.jpg', fit: [100, 100] }
]
]
}
}
Node.js: reading image files
In a Node.js environment you can reference file paths directly. Use setLocalAccessPolicy to control which directories are accessible:
const pdfmake = require('pdfmake');
pdfmake.setLocalAccessPolicy((path) => {
// Allow access to all local paths
return true;
});
const docDefinition = {
content: [
{ image: 'images/sampleImage.jpg', width: 200 }
]
};
pdfmake.createPdf(docDefinition).write('output.pdf');
In browser environments, local file paths are not available. Use data URLs or the images dictionary with pre-loaded base64 strings instead.