Image
A component for displaying images with optional alt text and custom styling
Overview
The Image component provides a simple way to display images in your application. It automatically handles missing images gracefully and supports accessibility features through alt text.
Use the Image component when you need to:
- Display images from dynamic data sources
- Ensure accessible images with proper alt text
- Apply consistent rounded corners and styling
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
Use the caption prop to display descriptive text below the image.
Complete Example
A complete example showing all props together:
Import
import { Image } from '@im/integral/components/styled';Props
Prop
Type