Image

tile/image

Shows an image from a source URL, with required alternative text for accessibility and an optional size.

Properties

Name	Required	Lightning Type	Default	Description
alt	Yes	`lightning__textType`		An alternative text that describes the image content for accessibility. Maximum 125 characters; an empty string for decorative images.
size	No	`lightning__textType`	`auto`	The size of the image. Valid values include `auto`, `sm`, `md`, `lg`, or `full`.
src	Yes	`lightning__urlType`		The absolute or relative image URL, URL-encoded.

Usage

Use an image to display a graphic referenced by a URL, such as a photo, illustration, diagram, or logo.

For a circular profile photo of a user or entity, use tile/avatar instead.

Note

Set src to the image URL and always provide alt text that describes the content for accessibility.

1{
2    "definition": "tile/image",
3    "attributes": {
4        "src": "https://cdn.example.com/photo.jpg",
5        "alt": "Bar chart showing Q3 revenue by region"
6    }
7}

Use size to control the image footprint. For a purely decorative image that conveys no information, set alt to an empty string so assistive technologies skip it.

1{
2    "definition": "tile/image",
3    "attributes": {
4        "src": "https://cdn.example.com/banner.jpg",
5        "alt": "",
6        "size": "full"
7    }
8}

The src attribute must reference a resource that’s accessible without authentication. To enable access to the resource, add the domain as a trusted URL. For more information, see Use Static Resources in Widgets.

Note

Size

Use these size values to control the image footprint. The aspect ratio is always preserved. The width is fixed and height scales to match.

auto (default): Preserves the image’s intrinsic dimensions.
sm: Small fixed width for thumbnails and inline graphics.
md: Medium fixed width for standalone images within a block of content.
lg: Large fixed width for prominent, focal images.
full: Fills the parent container’s width, for banners and hero images.

Design Guidelines

Consider these guidelines when working with images.

Set alt to an empty string only for decorative, redundant, or structural images.
Specify full to span the parent width, and auto when the image’s own dimensions are already correct.
Don’t depend on a fixed height. The height always scales from the width to preserve the aspect ratio.

Limitations

Note any limitations that apply to this component.

Slackbot

No known limitations for tile/image in Slackbot.

ChatGPT

No known limitations for tile/image in ChatGPT.

Agentforce

No known limitations for tile/image in Agentforce.