Image

tile/image

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

NameRequiredLightning TypeDefaultDescription
altYeslightning__textTypeAn alternative text that describes the image content for accessibility. Maximum 125 characters; an empty string for decorative images.
sizeNolightning__textTypeautoThe size of the image. Valid values include auto, sm, md, lg, or full.
srcYeslightning__urlTypeThe absolute or relative image URL, URL-encoded.

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.

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

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.

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.

Consider these valid and invalid image types.

Valid image formats include:

  • PNG
  • JPEG
  • GIF
  • WebP

Invalid image types include:

  • Vector and active content, such as image/svg+xml
  • Non-image MIME types, such as text/html, text/plain, application/octet-stream, image/bmp, or omitted media types

data: scheme isn’t supported when used in a link (href) context. To pass URL validation, use the data: scheme by following these guidelines.

Follow the data:<mediatype>;base64,<payload> syntax. The ;base64 flag is mandatory. Plain-text or raw URL-encoded data is rejected.

The decoded leading bytes must match the magic bytes of the declared MIME type. For example, PNG header corresponds to 89 50 4E 47, JPEG header FF D8 FF, GIF header GIF8, or WebP RIFF....WEBP.

Payload must be within an 8 MiB decoded size limit (MAX_DATA_IMAGE_BYTES) to prevent memory amplification attacks.

Unresolved template expressions, such as {!expr} in either the media-type or payload slots aren’t supported.

Use these size values to control the image footprint. The aspect ratio is always preserved. The width is fixed and the 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.

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.

Note any limitations that apply to this component.

No known limitations for tile/image in Slackbot.

No known limitations for tile/image in ChatGPT.

No known limitations for tile/image in Agentforce.