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

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

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.

Basic Properties

These control the image source, size, and presentation.

Crop Size and Fit Guidelines

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

---

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

Result: Users see a professional square thumbnail 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

1

Navigate to Lightning App Builder

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

2

Drag the AX - Image component

3

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

4

Configure Size and Layout

• Set Width to 300px

• Set Height to 300px

• Check Thumbnail for rounded profile styling

5

Customize Header

• Set Header Title to Product Image

• Header caption : Image of {{Record.Name}}

6

Configure Display Options

Check Display as Card for professional container styling

7

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

1

Navigate to Lightning App Builder

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

2

Drag the AX - Image component onto your Home page

3

Configure Image Source

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

4

Configure Display Options

• Set Crop Fit to contain

• Check Display as Card for professional container styling

5

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.

---

Summary

The Avonni Image component enhances Lightning pages with customizable, professional images. It’s ideal for profiles or product visuals.