Image
A component for displaying images with optional alt text and custom styling
Overview
The Image component displays CMS images with optional captions and an expandable full-screen dialog variant. It handles missing URLs gracefully and derives alt text from imageData.altText, imageData.name, or the fallback "Image".
Use the Image component when you need to:
- Display images from dynamic data sources
- Show an optional caption below the image
- Open a full-size image view in a dialog with
expandable - Ensure accessible images with proper alt text
The Image component requires an imageData object containing the image URL. If the URL is not provided, the component will render nothing.
Examples
Basic Usage
The simplest usage requires only an imageData prop with a url property. The component will display the image with automatic width and rounded corners.
Inside a Card
When media in a Card should respect responsive width limits, structure it as Card > ContentWrapper > Image. Then pass maxWidth2xs, maxWidthSm, and the other maxWidth* props on ContentWrapper (see that page for allowed sizes and how values cascade). Omit those props to keep the default fill behavior so the image tracks the full width of the card body.
The img rendered by Image has no border radius inside a card by design.
With Alt Text
The altText property provides accessibility support for screen readers. Alt text should be descriptive and convey the image's meaning.
With Name Property
If altText is not provided, the component will fall back to using the name property for the image alt attribute. If neither is provided, it defaults to "Image".
With Custom ClassName
Apply custom styling using the className prop. This is useful for responsive sizing, layout adjustments, or specific design requirements.
Handling Missing Images
If the imageData object is not provided, has no url, or the url is null, the component gracefully returns null and renders nothing.
No image will render below:
(Component returns null when URL is missing)
With Caption
Set imageData.caption to display descriptive text below the image. Empty or whitespace-only captions are not rendered.
Complete Example
A complete example showing all props together:
Expandable Image
Set expandable to open the image in a Dialog. At viewport widths of 769px and up, users can click the image or the expand button. Below that breakpoint, only the expand button opens the dialog and shows an "Expand Image" label.
The dialog uses the screen-reader title "Expanded Image View". Captions render below the inline image and again inside the dialog when provided.
Import
import { Image } from '@im/integral/components/styled';Props
Prop
Type