An enhanced image component that provides error handling, loading states, and fallback functionality. Built on top of the native HTML img element with additional features for better user experience.
Props
- All standard HTML img attributes are supported
onError
: Function - Custom error handler for image loading failures
ref
: React.Ref - React ref for accessing the image element
Features
- Automatic error handling
- Fallback on load failure
- Ref forwarding
- Alt text support
- Lazy loading capability
- Native browser caching
Usage Examples
Basic Image
import { Image } from 'mycrumbs-uikit';
<Image
alt="Description of the image"
/>
With Error Handling
<Image
alt="Profile picture"
onError={(e) => {
console.error('Image failed to load:', e);
}}
/>
Responsive Image
<Image
alt="Responsive image"
className="w-full h-auto max-w-lg"
/>
With Loading Attributes
<Image
alt="Lazy loaded image"
loading="lazy"
width={800}
height={600}
/>
With Fallback
const [imageSrc, setImageSrc] = useState('/path/to/image.jpg');
<Image
src={imageSrc}
alt="Image with fallback"
onError={() => setImageSrc('/path/to/fallback.jpg')}
/>
Best Practices
-
Image Loading:
- Use appropriate image sizes
- Implement lazy loading
- Provide width and height
- Consider responsive images
-
Error Handling:
- Always provide fallback behavior
- Log errors when needed
- Show user-friendly messages
- Handle network issues
-
Accessibility:
- Use descriptive alt text
- Consider color contrast
- Maintain aspect ratios
- Support screen readers
- Use appropriate image formats
- Implement lazy loading
- Optimize image sizes
- Use browser caching
- Consider CDN usage
- Implement responsive images
Styling
The component supports all standard image styling including:
- Width and height
- Object fit properties
- Border and border radius
- Margin and padding
- Responsive classes
- Transition effects
Error States
The component handles various error scenarios:
- Network failures
- Invalid image sources
- Loading timeouts
- Missing resources
- CORS issues
import type {
DetailedHTMLProps,
ImgHTMLAttributes,
Ref,
SyntheticEvent
} from 'react';
import { forwardRef, useCallback, useEffect, useState } from 'react';
interface ImageProps extends DetailedHTMLProps<
ImgHTMLAttributes<HTMLImageElement>,
HTMLImageElement
> {}
export const Image = forwardRef(function Image(
{
onError,
...props
}: DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>,
ref: Ref<HTMLImageElement>
) {
const [imageLoadFailed, setImageLoadFailed] = useState(false);
const handleError = useCallback(
(e: SyntheticEvent<HTMLImageElement, Event>) => {
if (imageLoadFailed) {
return;
}
setImageLoadFailed(true);
if (onError) {
onError(e);
}
},
[imageLoadFailed, setImageLoadFailed, onError]
);
useEffect(() => {
setImageLoadFailed(false);
}, [props.src]);
return (
<img
{...props}
src={imageLoadFailed ? '': props.src}
onError={handleError}
alt={props.alt || ''}
ref={ref}
/>
);
});
Responses are generated using AI and may contain mistakes.