> 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/dynamic-components/components/image.md). # Image The Avonni Image component displays an image from a URL or Content Document with support for sizing, positioning, cropping, comparison slider, magnifier effects, and accessibility configuration. ## Overview Use the Image component to embed a static or dynamically bound image anywhere on your page — product photos, logos, profile pictures, or any visual content. Pair it with a comparison slider to let users toggle between two versions of an image, or add a magnifier for close-up inspection. ## Configuration To configure the Image, select it on the canvas. The configuration panel opens on the right. The sections below mirror the Properties tab from top to bottom. ### Properties **Image Source** sets the URL or Content Document ID of the image. You can bind it to a record field, a text variable, a formula, or select a file directly from your org. **Width** and **Height** control the rendered dimensions. Accepted values are a number with a unit (e.g. `200px`, `50%`). Set one or the other — setting both can distort the image. Leave a field blank to let the browser determine the size automatically. **Position** controls horizontal alignment of the image within its container. Options are **Left**, **Center**, and **Right** (default: **Center**). The following settings appear under **Advanced Options**: * **Static Images** — when enabled, the image retains its fixed dimensions and is no longer responsive. * **Fluid** — makes the image responsive; it shrinks as needed or grows up to its native width. * **Fluid Grow** — similar to Fluid, but also allows the image to scale beyond its native width. * **Thumbnail** — adds a thumbnail-style border around the image. * **Lazy Loading** — controls when offscreen images are fetched. **Auto** (default) uses the browser default; **Lazy** defers loading until the image is near the viewport. * **Alternative Text** — a short description of the image for screen readers and for display when the image fails to load. Always provide meaningful alt text. ### Crop The Crop section controls how the image is sized and framed. **Crop Size** constrains the image to a fixed aspect ratio: **16x9**, **4x3**, **1x1**, or **None** (unconstrained). **Crop Fit** determines how the image fills its container when the image's aspect ratio doesn't match the container's. Default is **Cover**. | Option | Behavior | | ----------- | -------------------------------------------------------------------------------------------------------------------- | | **Cover** | Scales the image to fill the area completely, maintaining aspect ratio. Parts may be cropped. | | **Contain** | Scales the image to fit entirely within the area, maintaining aspect ratio. Empty space may appear around the image. | | **Fill** | Stretches or squashes the image to exactly fill the area, ignoring aspect ratio. May distort the image. | | **None** | Displays the image at its original size. If larger than the container, it will be clipped. | **Crop Position X** and **Crop Position Y** shift the visible crop area horizontally and vertically, expressed as a percentage (0–100). ### Compare Image The Compare Image section enables a side-by-side slider that lets users reveal a second image over the first. **Source** sets the URL or Content Document ID of the second image used for comparison. When a **Source** is provided, the **Compare Attributes** become available: * **Orientation** — the direction the slider moves: **Horizontal** (default) or **Vertical**. * **Move On** — whether the slider responds to **Click** or **Hover**. * **Original Label** — label overlaid on the first image. * **Compare Label** — label overlaid on the second image. * **Show Labels on Hover** — when enabled, the labels are only visible when the user hovers over the image. **Alternative Text** provides accessible text for the comparison image. ### Magnifier The Magnifier section adds an interactive zoom effect when users hover over the image. **Magnifier Type** selects the zoom behavior. Options are **Inner**, **Standard**, and **Follow**. Leave unset to disable the magnifier. When a Magnifier Type is selected, additional settings appear: * **Smooth Move** — enables smooth cursor tracking for the magnified view. * **Zoom Factor** — multiplier applied to the zoomed image (default: `2`). * **Zoom Ratio Width** and **Zoom Ratio Height** — dimensions of the zoom window as a percentage (default: `100`). Available for **Standard** and **Follow** types. For the **Standard** type only: * **Position** — where the enlarged image appears relative to the main image: **Auto** (default), **Top**, **Right**, **Bottom**, or **Left**. * **Horizontal Offset** and **Vertical Offset** — fine-tune the position of the enlarged image in pixels. ### Placeholder The Placeholder section controls what is shown when no image source is set. **Show Placeholder** — when enabled, displays a placeholder illustration and message instead of an empty area. When **Show Placeholder** is on: * **Placeholder Message** — text displayed below the placeholder illustration. * **Placeholder Illustration** — the illustration style to display. Choose from a range of Salesforce illustrations such as **No Preview** (default), **Desert**, **Maintenance**, **Going Camping**, and more. ### Set Component Visibility All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md). --- # 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 dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/dynamic-components/components/image.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.