Avatar fallback order should not happen when a URL is broken

[Rc85]

I shouldn't have to provide /broken.jpg just to use the Avatar fallback order. In a situation like a chat room, where there are multiple avatars that don't have a valid avatar URL, the app is constantly trying to fetch /broken.jpg, resultin gin multiple 404 errors. Please allow src to be undefined and will still fallback on the order.

Search keywords:

[Somesh520]

Hey! I’d like to work on this issue and submit a PR. Please assign it to me / let me know if anyone is already working on it.

[silviuaavram]

@Rc85 help me understand what you want to achieve. I don't understand why you need to pass a broken URL.

[Rc85]

@Rc85 help me understand what you want to achieve. I don't understand why you need to pass a broken URL.

Sorry. I figured it out, but I have another issue where if the provided children is an img with a broken src, it does not fallback on alt text. It shows the broken image icon. The component should use something like

React.cloneElement(child, { 
  onError: handleError,
  style: { ...child.props.style, display: isBroken ? 'none' : 'block' } 
})

to check if the provided img src is valid. If not, hide the child and show first letter of alt text.

So for example

<Avatar src='/user-broken-profile-pic-url.jpg' alt='John Doe'><img src='/a-different-generic-avatar-icon.jpg' style={{ width: '40px', height: '40px' }} /></Avatar>

This will show

instead of showing a "J".

I'd like to propose the idea that if the image(s) raises an error, remove from the list of children. If there isn't any children left, then it would fallback on the alt text.

[mj12albert]

Here's a workaround suggested by Claude code:

function AvatarWithImageFallback({ src, alt, fallbackSrc, ...props }) {
  const [childImgFailed, setChildImgFailed] = React.useState(false);

  return (
    <Avatar src={src} alt={alt} {...props}>
      {!childImgFailed ? (
        <img
          src={fallbackSrc}
          onError={() => setChildImgFailed(true)}
          style={{ width: '100%', height: '100%', objectFit: 'cover' }}
        />
      ) : null}
    </Avatar>
  );
}

[mj12albert]

@Rc85 IMO this is quite an exotic use-case, I'll make it waiting for 👍 and see if there is any interest