Images

There are multiple ways to embed images in PDFs, and you can choose the most suitable method for your needs.

Upload from Dashboard

You can upload image files from dashboard > files and reference them in your HTML.

<!DOCTYPE html>
<html>
  <body>
    <img src="sample.png" alt="Sample image" />
  </body>
</html>

This method is suitable for images that are fixed in PDFs, such as logos. Once uploaded, images can be reused in different PDF generations. Note that subdirectory paths (e.g., images/sample.png) are not supported, and all the following notations refer to the same sample.png:

<!-- All of these refer to the same file -->
<img src="sample.png" alt="Sample image" />
<img src="./sample.png" alt="Sample image" />
<img src="/sample.png" alt="Sample image" />

External Image References

You can directly reference images that are already hosted on the internet.

<!DOCTYPE html>
<html>
  <body>
    <img src="https://example.com/images/sample.png" alt="External image" />
  </body>
</html>

Base64 Encoding

For dynamically generated images or when you need to embed different images for each PDF, you can include Base64 encoded image data directly in the HTML.

<!DOCTYPE html>
<html>
  <body>
    <img src="data:image/jpeg;base64,/9j/4AAQSkZJRg..." alt="Base64 image" />
  </body>
</html>

This method is suitable for:

Embedding dynamically generated images such as QR codes
Displaying different images for each user

Fonts and Languages Styles