Inserting Images

Let’s explore how to insert images into your templates effectively. You can include images from URLs or base64 encoded strings, making it easy to add dynamic visual elements to your documents.

That’s pretty useful for things like logos, product images, profile pictures, or any other images that you want to include in your generated documents.

Inserting Base64 Images

You can include images that are base64 encoded. This is useful when you want to embed images directly into your JSON data without relying on external URLs, or when the image is not publicly accessible.


{
  "imageData": "iVBORw0KGgoAAAANSUhEUgAAAAUA..."
}

Then, in your template, use the following syntax to insert the base64 image:

template.docx


{IMAGE fromBase64(imageData)}

You can also specify the width and height of the image in centimeters. If you only specify the width, the height will be auto-scaled to maintain the aspect ratio. If you specify both, the image may be stretched if the aspect ratio does not match.

template.docx


{IMAGE fromBase64(myBase64Image, 5)} // 5 cm width, the height will be auto-scaled
{IMAGE fromBase64(myBase64Image, 5, 3)} // 5 cm width and 3 cm height, the image may be stretched

Inserting Images from URLs

You can also include images from a URL. To include an image from a URL, it has to be publicly accessible for the API to fetch it during document generation.

We recommend insert images as base64 strings instead of URLs, as this ensures that the image is always available. Using image URLs will also slow down the generation process, as the API needs to fetch the image.

You can define the image URL in your JSON data like this:


{
  "myImageUrl": "https://picsum.photos/200"
}

Then, in your template, use the following syntax to insert the image:

template.docx


{IMAGE fromUrl(myImageUrl)}
{IMAGE fromUrl(myImageUrl, 5)} // 5 cm width, the height will be auto-scaled
{IMAGE fromUrl(myImageUrl, 5, 3)} // 5 cm width and 3 cm height, the image may be stretched