Use images in a template

An image can be a fixed part of the design, such as a logo, or a page background. Choose an image stored in the project’s Assets, or use an HTTPS URL for an image hosted elsewhere.

Assets keeps reusable images in the project and lets you select them directly from the editor.

1. Select an image from Assets

Upload an image to Assets in the project. In the editor, select the part that needs the image, open Props, add a prop, and choose Asset. Select Select image, open the folder, and choose the file.

For example, call the prop logo. The app stores a reference to the selected project file, so you do not need to paste a download URL into the template.

Choosing a different image for the prop updates HTML locations using that same prop.

2. Display the image in HTML

In the section containing the logo prop, use:

<img src="{{ props.logo }}" alt="Logo" class="logo" />

For a Global logo prop, use {{ global.props.logo }}. Set its dimensions in the section’s CSS:

.logo {
  width: 120px;
  height: 48px;
  object-fit: contain;
}

contain fits the complete image inside the box; cover fills the box and may crop excess content. Choose the behavior you want rather than stretching the image to both dimensions.

3. Use an image as a background

For a shared background, open Global → Config → Page background and choose an image. For a single page, select it, open Config → Background → Page background, and enable its own background.

Size, Position, and Repeat control how the image fills the background. For example, Cover fills the area, Center places it in the middle, and No repeat prevents tiling.

Headers and footers have their own Background settings in Config. See Headers and footers for those areas.

4. Use an external image URL

You can put an HTTPS URL directly in src when the workspace permits external images. It must return a public image file, rather than a web page containing an image or a URL requiring sign-in.

<img src="https://example.com/images/banner.png" alt="" />

External image URLs accept PNG, JPEG, WebP, GIF, and AVIF. Remote SVG is not supported; upload SVG through Assets and select it with an Asset prop. URLs must use HTTPS on port 443, have no embedded username/password, and resolve to public addresses; redirects are checked too.

Limits per render: 5 MiB per image, 30 MiB total, 100 image requests, and 10 seconds per fetch including redirects. A public URL can still fail if its format, size, or response violates these limits. On plans allowing external images, fetch failures fail the render rather than silently omit the image.

If an image works in a signed-in browser but is missing from a PDF, check whether its URL depends on a cookie or session. The renderer needs to fetch it independently of your browser.

For images already in Assets, use the Asset picker instead of copying a preview URL. When resource access is unavailable, the app shows the relevant message; see Plan limits for workspace access details.