[BUG] - Report: Avatar Component from @heroui/react Not Working (Works with @nextui-org/react)

[anandhibare]

HeroUI Version

2.6.14

Describe the bug

The Avatar component does not function as expected when imported from @heroui/react, but it works perfectly when imported from @nextui-org/react.

Here’s the code snippet used for testing:

import { Avatar } from "@heroui/react";
// import { Avatar } from "@nextui-org/react"; // This works as expected
import { UseUserContext } from "../../../auth";
import { useEffect, useState } from "react";

export const AvatarIssue = () => {
  const { profilePicBlob } = UseUserContext();
  const [profilePicUrl, setProfilePicUrl] = useState<string | undefined>(undefined);

  useEffect(() => {
    const setUserData = async () => {
      if (profilePicBlob) {
        const url = URL.createObjectURL(profilePicBlob);
        setProfilePicUrl(url);

        return () => {
          URL.revokeObjectURL(url);
        };
      } else {
        setProfilePicUrl(undefined);
      }
    };
    setUserData();
  }, [profilePicBlob]);

  return (
    <div>
      <Avatar src={profilePicUrl} isBordered />
    </div>
  );
};

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Steps to Reproduce

• Import the Avatar component from @heroui/react.
• Use the above code snippet in your project.
• Observe that the Avatar component does not render or function correctly.

Expected behavior

Expected Behavior
The Avatar component should work identically when imported from @heroui/react as it does when imported from @nextui-org/react.

Screenshots or Videos

No response

Operating System Version

WSL (Ubuntu) on Windows 11

Browser

Chrome

[linear]

ENG-1963 [BUG] - Report: Avatar Component from @heroui/react Not Working (Works with @nextui-org/react)

[wingkwong]

Assuming the version of @nextui-org/react is the last version before rebranding, it didn't change any logic. Probably you may try remove your node_modules and lock file before installing @heroui packages. If it still fails, please provide a sandbox instead.

[anandhibare]

Hi @wingkwong This is also happening with the Image component. The profilePicUrl in the above code works fine with the original img html element but the Image component from Hero UI fails to load the image from src = {profilePicUrl}.

In the main code I am receiving a jpeg image from a Django server, Then it becomes a blob using const profilePicBlob = new Blob([response.data], { type: "image/jpeg" }); and then eventually gets into profilePicUrl.

[MeetBhingradiya]

have you updated Ui Provider ?

import { NextUIProvider } from "@nextui-org/system";

to below ones

import { HeroUIProvider } from "@heroui/system";

as you said "Observe that the Avatar component does not render or function correctly."

[anandhibare]

Yes, I have done that already... Currently, this is the workaround I'm using:

The img element from HTML to display the user's profile picture if it's available. I'm currently using the Avatar component solely to display the default profile picture when the original is not available

<div className="relative -top-24 left-3">
  {profilePicUrl ? (
    <img 
      className="dark:border-content5 size-20 rounded-full border-4 outline outline-1 outline-foreground-500" 
      alt="profile-pic" 
      src={profilePicUrl} 
    />
  ) : (
    <Avatar 
      className="dark:border-content5 h-20 w-20" 
      src={undefined} 
    />
  )}
</div>

[wingkwong]

@anandhibare can you please provide a minimal reproducible environment? So far what you've provided includes other unrelated extra logic. We need a sandbox so that we could start from the same page.