Image

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

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.

PreviewCode

Fullscreen

With Alt Text

The altText property provides accessibility support for screen readers. Alt text should be descriptive and convey the image's meaning.

PreviewCode

Fullscreen

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".

PreviewCode

Fullscreen

With Custom ClassName

Apply custom styling using the className prop. This is useful for responsive sizing, layout adjustments, or specific design requirements.

PreviewCode

Fullscreen

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.

Complete Example

A complete example showing all props together:

PreviewCode

Fullscreen

Import

import { Image } from '@im/integral/components/styled';

Props