# Image **Category**: react **URL**: https://www.heroui.com/docs/react/migration/image **Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/react/migration/(components)/image.mdx > Migration guide for Image from HeroUI v2 to v3 *** The Image component has been **removed** in HeroUI v3. Use native HTML `` element or Next.js `Image` component with Tailwind CSS classes instead. ## Key Changes ### 1. Component Removal **v2:** `` component from `@heroui/react` **v3:** Native HTML `` element or Next.js `Image` component ### 2. Features Mapping The v2 Image component had several features that need to be replaced: | v2 Feature | v3 Equivalent | Notes | |-----------|---------------|-------| | `radius` prop | `rounded-*` Tailwind classes | Use `rounded-sm`, `rounded-md`, `rounded-lg`, `rounded-full` | | `shadow` prop | `shadow-*` Tailwind classes | Use `shadow-sm`, `shadow-md`, `shadow-lg` | | `isBlurred` prop | Manual blur implementation | Use CSS `filter: blur()` or Tailwind `blur-*` utilities | | `isZoomed` prop | Manual hover zoom | Use `hover:scale-*` Tailwind classes | | `fallbackSrc` prop | Manual error handling | Use `onError` handler with state | | `disableSkeleton` / Loading skeleton | Manual loading state | Use React state + conditional rendering | | `removeWrapper` prop | Direct rendering | No wrapper needed, render `` directly | ## Structure Changes In v2, `Image` was a component wrapper around the native `` element: ```tsx import { Image } from "@heroui/react"; export default function App() { return ( Example image ); } ``` In v3, use the native `` element directly with Tailwind CSS classes: ```tsx export default function App() { return ( Example image ); } ``` ## Migration Examples ### With Next.js Image (Recommended) If you're using Next.js, use the optimized `Image` component: ```tsx import { Image } from "@heroui/react"; Example ``` ```tsx import Image from "next/image"; Example ``` ### With Zoom Effect ```tsx ... ``` ```tsx
...
``` ### With Blur Effect ```tsx ... ``` ```tsx
...
``` ### With Fallback Image ```tsx Example ``` ```tsx import { useState } from "react"; function ImageWithFallback({ src, fallbackSrc, alt, ...props }) { const [imgSrc, setImgSrc] = useState(src); return ( {alt} setImgSrc(fallbackSrc)} {...props} /> ); } ``` ### With Loading Skeleton ```tsx Example ``` ```tsx import { useState } from "react"; function ImageWithSkeleton({ src, alt, ...props }) { const [isLoading, setIsLoading] = useState(true); const [hasError, setHasError] = useState(false); return (
{isLoading && (
)} {alt} setIsLoading(false)} onError={() => { setIsLoading(false); setHasError(true); }} {...props} />
); } ``` ### Combined Features ```tsx Example ``` ```tsx
Example
``` ## Creating a Reusable Image Component (Optional) If you frequently use images with similar features, you can create a reusable component: ```tsx import { Image } from "@heroui/react"; ``` ```tsx import { useState } from "react"; import { cn } from "@/lib/utils"; // or your cn utility interface CustomImageProps extends React.ImgHTMLAttributes { radius?: "none" | "sm" | "md" | "lg" | "full"; shadow?: "none" | "sm" | "md" | "lg"; isZoomed?: boolean; isBlurred?: boolean; fallbackSrc?: string; } const radiusClasses = { none: "rounded-none", sm: "rounded-sm", md: "rounded-md", lg: "rounded-lg", full: "rounded-full", }; const shadowClasses = { none: "shadow-none", sm: "shadow-sm", md: "shadow-md", lg: "shadow-lg", }; export function CustomImage({ src, alt, className, radius = "lg", shadow = "none", isZoomed = false, isBlurred = false, fallbackSrc, onError, ...props }: CustomImageProps) { const [imgSrc, setImgSrc] = useState(src); const [isLoading, setIsLoading] = useState(true); const handleError = (e: React.SyntheticEvent) => { if (fallbackSrc && imgSrc !== fallbackSrc) { setImgSrc(fallbackSrc); } onError?.(e); }; const imageElement = ( {alt} setIsLoading(false)} onError={handleError} {...props} /> ); if (isBlurred) { return (
{imageElement}
); } if (isZoomed || isLoading) { return (
{isLoading && (
)} {imageElement}
); } return imageElement; } // Usage ``` ## Complete Example ```tsx import { Image } from "@heroui/react"; export default function App() { return (
Image 1 Image 2 Image 3
); } ``` ```tsx export default function App() { return (
Image 1
Image 2
Image 3
); } ``` ## Summary 1. **Component Removed**: `Image` component no longer exists in v3 2. **Import Change**: Remove `import { Image } from "@heroui/react"` 3. **Use Native Element**: Replace with native `` HTML element or Next.js `Image` 4. **Features**: Implement blur, zoom, skeleton, and fallback manually 5. **Styling**: Apply Tailwind CSS classes directly for radius, shadow, and effects ## Migration Steps 1. **Remove Import**: Remove `Image` from `@heroui/react` imports 2. **Replace Component**: Replace all `` instances with `` elements 3. **Add Tailwind Classes**: Apply equivalent Tailwind classes for styling (radius, shadow) 4. **Implement Features**: Add manual implementations for blur, zoom, skeleton, and fallback if needed 5. **Use Next.js Image**: If using Next.js, consider using `next/image` for optimization 6. **Optional**: Create reusable wrapper components for frequently used patterns ## Next.js Image Component If you're using Next.js, the `Image` component from `next/image` provides: - Automatic image optimization - Lazy loading by default - Responsive images with `srcSet` - Placeholder blur support - Built-in loading states ```tsx import Image from "next/image"; Example ```