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.

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

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

Navigate to Lightning App Builder

Edit your Contact record page (Setup > Lightning App Builder > find your Contact page)

Drag the AX - Image component onto your page layout

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.

Configure Size

Set Width and Height to 100px to fit the image on the contact page.

Configure Crop and Style

Set Crop Size to 1x1 for a crisp, modern square presentation
Check Thumbnail for a compact and streamlined profile image

Configure the Header

Set Header - Title to Profile Image for instant context.

Configure Display Options

Check Display as Card for an elegant, standout profile card effect

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

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

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

Navigate to Lightning App Builder

Edit your Product2 record page (Setup > Lightning App Builder > find your Product2 page)

Drag the AX - Image component

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

Configure Size and Layout

Set Width to 300px
Set Height to 300px
Check Thumbnail for rounded profile styling

Customize Header

Set Header Title to Product Image
Header caption : Image of {{Record.Name}}

Configure Display Options

Check Display as Card for professional container styling

Save & Review

Example 3: Add your company banner to your Home page

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

Navigate to Lightning App Builder

Edit your Home page (Setup > Lightning App Builder > find your Home page)

Drag the AX - Image component onto your Home page

Configure Image Source

Set Image Url or Content Document Id to /resource/CompanyLogo (assumes you have a static resource storing your company logo)

Configure Display Options

Set Crop Fit to contain
Check Display as Card for professional container styling

Save & Review

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 [email protected] for assistance.

Last updated 1 month ago

Was this helpful?