Avatar fallback not shown when updating props

[MobinAskari]

I copied the example from Shadcn website itself and modified it a little:

<Avatar className="h-9 w-9">
       // pfpSrc is a prop and although it's updated correctly to null and results in AvatarImage not being rendered,
       // the component still doesn't render AvatarFallback; this problem, however, is fixed upon refreshing the browser
    {pfpSrc && (
      <AvatarImage
        src={pfpSrc}
        alt="User profile picture"
        key={pfpSrc || null}
      />
    )}
        <AvatarFallback>{username?.slice(0, 2)}</AvatarFallback>

        // I had to change the logic to get the desired result:
        {pfpSrc ? (
      <AvatarImage
        src={pfpSrc}
        alt="User profile picture"
        key={pfpSrc || null}
      />
    ) : ( <AvatarFallback>{username?.slice(0, 2)}</AvatarFallback> ) }
</Avatar>

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[toitzi]

I have the same issue, did you solve it @MobinAskari ?

[MobinAskari]

I have the same issue, did you solve it @MobinAskari ?

I guess I tried using this component a week ago and apparently it was not fixed, If you're using Next.js I suggest taking a look at the Image component and try implementing their solution for fallback images

[toitzi]

Ok yeah i will look into that thanks a lot, @shadcn can we still maybe re-open the issue? it still exists, i do not know if there is something shadcn can fix, but probably somewhere

EDIT: Might be something to fix in radix

[toitzi]

probably relates to this radix issue: https://github.com/radix-ui/primitives/issues/1767

[toitzi]

@MobinAskari If someone else has this issue, replacing the AvatarImage Primitive Code with a normal image tag in the avatar component:

const AvatarImage = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Image>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
>(({ className, ...props }, ref) => (
  <img
    ref={ref}
    className={cn('object-cover w-full h-full', className)}
    {...props}
    alt={props.alt}
  />
))
AvatarImage.displayName = AvatarPrimitive.Image.displayName

seems to be a good workarround for now.

Note: Yes the alt attribute "can be omitted" since the props get written anyway, but somehow typescript does not like that if it is not present lol

[MobinAskari]

Ok yeah i will look into that thanks a lot, @shadcn can we still maybe re-open the issue? it still exists, i do not know if there is something shadcn can fix, but probably somewhere

EDIT: Might be something to fix in radix

Yeah Shadcn UI is a wrapper around Radix so I assume I should have opened this issue there and not here, also I don't think Shadcn will have the time to fix issues like this but let's hope for the best