Build image components

To display images on invoices, add image components to cells.

Note: You can create more than one active version of an invoice template per locale, and use conditional expressions to determine which fields appear on a version of an invoice template. You can only use conditional expressions in templates that you create or that you copy from a marketplace-provided default template. You cannot add conditional expressions to marketplace default templates. For more information, see Create conditional expressions.

Prerequisites

You can add image components to cell components. See Build cell components.

To populate the required source property in image components, you can upload an image and acquire an image URL for it. See Manage images.

Default template JSON sample

In the Appdirect Template_EN_US default template, see lines 62-65.

To download the default template, go to .

Image component JSON schema

{
  "type": "image",
  "properties": {
    "visible" : "true",
    "src": "http://path-2-img"
  },
  "style": {
    "height": "100px",
    "width": "200px"
  }
}

Elements to populate image components

Element     Type Description
image     object Defines styles, behaviors, and content, for image components. The images appear on invoices.
  type    string

Required. Defines the component as type image.

Valid value:

image
  properties   object Required. Defines the source for an image and component visibility.
    visible boolean

Required.

Defines whether component appears on invoices.

Valid values:

true | false
    src string

Required. URL for image source. To acquire a URL for an image that you store on the AppDirect platform, see Manage images.

When null, invoices display no image. When {{Invoice Logo}}, invoices display the logo that you configure at see Configure invoice headers and content). Preview the template to validate that the automatically-resized logo image displays appropriately in this template.

Format: 

https://* | {{Invoice Logo}} | null
  style   object

Required. Defines formatting for the image.

When you populate height and width, the image appears on the invoice with those dimensions. When you populate only height or width, the image dimensions adjust to maintain its aspect ratio.

Valid values: HTML element names and CSS styles for the named HTML element.

All HTML styles. Only relevant styles that the Invoice Builder can render appear in the user interface preview and the PDF.
    height string

Image height in pixels, ems, millimeters, points, or inches.

Format: [0-9]+(px|em|mm|pt|in)

Example: 

34px
    width string

Image width in pixels, ems, millimeters, points, or inches.

Format: [0-9]+(px|em|mm|pt|in)

Example:

34px