Image

Key ChangesCopy Anchor Link

1. Component RemovalCopy Anchor Link

v2: <Image> component from @heroui/react
v3: Native HTML <img> element or Next.js Image component

2. Features MappingCopy Anchor Link

The v2 Image component had several features that need to be replaced:

Structure ChangesCopy Anchor Link

In v2, Image was a component wrapper around the native <img> element:

import { Image } from "@heroui/react";

export default function App() {
  return (
    <Image
      src="https://example.com/image.jpg"
      alt="Example image"
      width={300}
      height={200}
    />
  );
}

In v3, use the native <img> element directly with Tailwind CSS classes:

export default function App() {
  return (
    <img
      src="https://example.com/image.jpg"
      alt="Example image"
      width={300}
      height={200}
      className="rounded-lg"
    />
  );
}

Migration ExamplesCopy Anchor Link

With Next.js Image (Recommended)Copy Anchor Link

If you're using Next.js, use the optimized Image component:

import { Image } from "@heroui/react";

<Image
  src="/image.jpg"
  alt="Example"
  width={300}
  height={200}
/>

With Zoom EffectCopy Anchor Link

<Image isZoomed src="..." alt="..." />

With Blur EffectCopy Anchor Link

<Image isBlurred src="..." alt="..." />

With Fallback ImageCopy Anchor Link

<Image
  src="https://example.com/image.jpg"
  fallbackSrc="/fallback.jpg"
  alt="Example"
/>

With Loading SkeletonCopy Anchor Link

<Image
  src="https://example.com/image.jpg"
  alt="Example"
  disableSkeleton={false}
/>

Combined FeaturesCopy Anchor Link

<Image
  src="https://example.com/image.jpg"
  alt="Example"
  radius="lg"
  shadow="md"
  isZoomed
  isBlurred
  width={400}
  height={300}
/>

Creating a Reusable Image Component (Optional)Copy Anchor Link

If you frequently use images with similar features, you can create a reusable component:

import { Image } from "@heroui/react";

<Image
  src="..."
  radius="lg"
  shadow="md"
  isZoomed
/>

Complete ExampleCopy Anchor Link

import { Image } from "@heroui/react";

export default function App() {
  return (
    <div className="space-y-4">
      <Image
        src="https://example.com/image1.jpg"
        alt="Image 1"
        width={300}
        height={200}
        radius="lg"
        shadow="md"
      />
      <Image
        src="https://example.com/image2.jpg"
        alt="Image 2"
        width={300}
        height={200}
        isZoomed
        radius="lg"
      />
      <Image
        src="https://example.com/image3.jpg"
        alt="Image 3"
        width={300}
        height={200}
        isBlurred
        radius="full"
      />
    </div>
  );
}

SummaryCopy Anchor Link

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 <img> 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 StepsCopy Anchor Link

1. Remove Import: Remove Image from @heroui/react imports
2. Replace Component: Replace all <Image> instances with <img> 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 ComponentCopy Anchor Link

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

import Image from "next/image";

<Image
  src="/image.jpg"
  alt="Example"
  width={300}
  height={200}
  className="rounded-lg shadow-md"
  placeholder="blur" // Optional: blur placeholder
  blurDataURL="data:image/..." // Optional: base64 blur data
/>