> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/app-builder-components/app-builder-components/ax-image.md).

# AX - Image

## Overview

**AX - Image** is a Lightning App Builder component that displays images on your record pages, app pages, and home pages with full control over sizing, cropping, and positioning.

Use it to show product photos, profile pictures, logos, or any image from Salesforce—including Content Documents, static resources, or external URLs. Configure how images display, whether as thumbnails, full-width headers, or within card containers.

Perfect for visual record identification, branded page headers, or displaying dynamic images based on field values

### Getting Started

Use this simple tutorial to learn the basics of the Image component and start building your use cases.

{% @arcade/embed url="<https://app.arcade.software/share/f4weSD51JW94GHtg4juv>" flowId="f4weSD51JW94GHtg4juv" %}

### Key features

* **Flexible Source:** Displays an image from a URL, static resource, or Content Document ID.
* **Sizing & Position:** Configure width, height, and alignment (left, center, right).
* **Cropping:** Apply an aspect ratio (16x9, 4x3, 1x1) with cover, contain, or fill behavior.
* **Thumbnail Style:** Render the image as a compact rounded thumbnail.
* **Interactivity:** Optional click-to-preview in a full-screen modal.
* **Header & Card:** Add a title, caption, icon, and optional card container.

### Use Cases

* **Product Page:** Show a uniform product image.
* **Contact or User Page:** Display a consistent profile photo.
* **Asset Page:** Present a clear item image for verification.
* **Welcome Panel:** Feature a branded banner or greeting image.
* **Team Spotlight:** Highlight an employee with a thumbnail.
* **Promotion Highlight:** Display a featured campaign image.

***

## Configuration

Add the Image component to a Lightning page in App Builder and configure it via the Properties Panel.

### Properties

| Label                            | Type    | Default | Required | Description                                                                                                                                                                                                                             |
| -------------------------------- | ------- | ------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Image Url or Content Document Id | String  | —       | Yes      | The URL or ContentDocumentId of the image to display. Supports standard formats like JPG, PNG, and GIF. Example: <https://example.com/image.jpg> or 069XXXXXXXXXXXX.                                                                    |
| Width                            | String  | —       |          | The width of the image in pixels or valid CSS units (e.g., 200px, 100%).                                                                                                                                                                |
| Height                           | String  | —       |          | The height of the image in pixels or valid CSS units (e.g., 150px, auto).                                                                                                                                                               |
| Position                         | String  | `left`  |          | Alignment of the image within its container. Valid values: left, center, right. Options: `left`, `center`, `right`.                                                                                                                     |
| Crop Size                        | String  | `none`  |          | Sets the aspect ratio used to crop the image for consistent presentation. Valid values: 16x9, 4x3, 1x1. Pair with cropFit to control how the image fills that ratio. Options: `none`, `16x9`, `4x3`, `1x1`.                             |
| Crop Fit                         | String  | `cover` |          | Controls how the image fills the cropped aspect-ratio container. Valid values: cover, contain, fill. Use it with cropSize to lock the shape and then choose how the image should behave inside it. Options: `cover`, `contain`, `fill`. |
| Thumbnail                        | Boolean | `false` |          | If true, displays the image in a smaller thumbnail style, typically with a rounded or square border radius.                                                                                                                             |
| Clickable                        | Boolean | `false` |          | If true, the image becomes interactive. Clicking on it opens a full-screen preview modal, allowing users to view the image in greater detail.                                                                                           |
| Header - Title                   | String  | —       |          | Text displayed as the main title in the component header.                                                                                                                                                                               |
| Header - Caption                 | String  | —       |          | Subheading text displayed below the header title to provide context.                                                                                                                                                                    |
| Header - Icon Name               | String  | —       |          | The Lightning Design System name of the icon (e.g., standard:photo).                                                                                                                                                                    |
| Display as Card                  | Boolean | `false` |          | If true, displays the image inside a styled card container for better presentation in dashboards or record pages.                                                                                                                       |

### Crop Size and Fit Guidelines

*Note:* Use contain for critical content (e.g., logos); cover for immersive visuals.

## Use Case Examples

### Example 1: Profile Image on Contact Page

{% @arcade/embed url="<https://app.arcade.software/share/HYYB2GxwX30MxAwqwum5>" flowId="HYYB2GxwX30MxAwqwum5" %}

**Scenario**: Display a professional square thumbnail profile photo on Contact record pages using images stored in Salesforce Files.

**Prerequisites:**

* Create a custom field to store the image ContentDocumentId on the Contact object `Profile_Photo_ID__c`

**Steps**

{% stepper %}
{% step %}

#### Navigate to Lightning App Builder

Edit your Contact record page (Setup > Lightning App Builder > find your Contact page)
{% endstep %}

{% step %}

#### Drag the **AX - Image** component onto your page layout

{% endstep %}

{% step %}

#### **Configure Image Source**

Set **Image Url or Content Document Id** to `{{Record.Profile_Photo_ID__c}}` to display the image dynamically from the contact's profile photo merge field.
{% endstep %}

{% step %}

#### **Configure Size**

Set **Width** and **Height** to `100px` to fit the image on the contact page.
{% endstep %}

{% step %}

#### **Configure Crop and Style**

* Set **Crop Size** to `1x1` for a crisp, modern square presentation
* Check **Thumbnail** for a compact and streamlined profile image
  {% endstep %}

{% step %}

#### **Configure the Header**

Set **Header - Title** to `Profile Image` for instant context.
{% endstep %}

{% step %}

#### **Configure Display Options**

Check **Display as Card** for an elegant, standout profile card effect
{% endstep %}

{% step %}

#### Click **Save** to keep your visual upgrades and personalize every contact page

{% endstep %}
{% endstepper %}

**Result**: Users see a professional square thumbnail profile image, labeled "Profile Image," in a styled card container on the Contact page, perfect for quick visual identification

### Example 2: Image on a Product page

{% @arcade/embed url="<https://app.arcade.software/share/pA1DSj34dtaEcVyGOGBK>" flowId="pA1DSj34dtaEcVyGOGBK" %}

**Scenario:** Display a professional photo of your products using an image stored in Salesforce files in order to drive your teams' product knowledge and showcase your products.

**Prerequisites**

* Create a text field on the Product2 object (`ThumbnailId__c`) to store the ContentDocumentId of the image
* Populate the field on your products

{% stepper %}
{% step %}

#### Navigate to Lightning App Builder

Edit your Product2 record page (Setup > Lightning App Builder > find your Product2 page)
{% endstep %}

{% step %}

#### Drag the **AX - Image** component

{% endstep %}

{% step %}

#### **Configure Image Source**

* Set **Image Url or Content Document Id** to `{{Record.Profile_Photo_ID__c}}` (assumes you have a custom field storing the ContentDocumentId)
* Alternative: Use a direct ContentDocumentId like `069XXXXXXXXXXXX` for testing
  {% endstep %}

{% step %}

#### **Configure Size and Layout**

* Set **Width** to `300px`
* Set **Height** to `300px`
* Check **Thumbnail** for rounded profile styling
  {% endstep %}

{% step %}

#### Customize Header

* Set **Header - Title** to `Product Image`
* Header caption : `Image of {{Record.Name}}`
  {% endstep %}

{% step %}

#### **Configure Display Options**

Check **Display as Card** for professional container styling
{% endstep %}

{% step %}

#### Save & Review

{% endstep %}
{% endstepper %}

### Example 3: Add your company banner to your Home page

{% @arcade/embed url="<https://app.arcade.software/share/Q2y62zdknjiBYPY5tlyJ>" flowId="Q2y62zdknjiBYPY5tlyJ" %}

**Scenario:** Display your company logo in a banner on your Home page to drive user engagement and adoption.

**Prerequisites**

* Create a static resource containing the image file named to store your company logo image file `/resource/CompanyLogo`

{% stepper %}
{% step %}

#### Navigate to Lightning App Builder

Edit your Home page (Setup > Lightning App Builder > find your Home page)
{% endstep %}

{% step %}

#### Drag the **AX - Image** component onto your Home page

{% endstep %}

{% step %}

#### **Configure Image Source**

* Set **Image Url or Content Document Id** to `/resource/CompanyLogo` (assumes you have a static resource storing your company logo)
  {% endstep %}

{% step %}

#### **Configure Display Options**

* Set **Crop** **Fit** to `contain`
* Check **Display as Card** for professional container styling
  {% endstep %}

{% step %}

#### Save & Review

{% endstep %}
{% endstepper %}

***

## Key Considerations

* **Image Source:** Use ContentDocumentId for secure files; ensure URLs are accessible.
* **Size and Crop:** Adjust Width, Height, and Crop Size for layout consistency.
* **Performance:** Optimize image size to avoid slow loading.
* **Accessibility:** Add alt text via descriptions; test with screen readers.
* **Limitations:** No editing; respects sharing/FLS rules.

***

## Troubleshooting Common Issues

* **Image Not Displaying:** Check Image Url or Content Document Id and file permissions.
* **Crop Issues:** Verify Crop Size and Crop Fit settings match the image aspect ratio.
* **Card Not Showing:** Ensure Display as Card is true.
* **If Issues Persist:** Contact our support team at <support@avonni.app> for assistance.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.avonnicomponents.com/app-builder-components/app-builder-components/ax-image.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.