fix: fallback for missing avatar images (#9603)

Signed-off-by: Matt Krick <matt.krick@gmail.com>
ParabolInc · Apr 5, 2024 · 1a7e298 · 1a7e298
1 parent 89aeea3
commit 1a7e298
Showing 1 changed file with 8 additions and 4 deletions.
diff --git a/packages/client/components/Avatar/Avatar.tsx b/packages/client/components/Avatar/Avatar.tsx
@@ -1,13 +1,13 @@
 import styled from '@emotion/styled'
-import React, {forwardRef} from 'react'
+import React, {forwardRef, useState} from 'react'
 import defaultUserAvatar from '../../styles/theme/images/avatar-user.svg'
 import AvatarBadge from '../AvatarBadge/AvatarBadge'
 
 type ImageBlockProps = Pick<Props, 'sansRadius' | 'sansShadow' | 'picture' | 'size' | 'onClick'>
 
 const ImageBlock = styled('div')<ImageBlockProps>(
   ({sansRadius, sansShadow, picture, size, onClick}) => ({
-    backgroundImage: `url(${picture ?? defaultUserAvatar})`,
+    backgroundImage: `url(${picture})`,
     backgroundPosition: 'center center',
     backgroundRepeat: 'no-repeat',
     backgroundSize: 'cover',
@@ -62,7 +62,10 @@ const Avatar = forwardRef((props: Props, ref: any) => {
     sansShadow,
     size
   } = props
-
+  const [imageUrl, setImageUrl] = useState(picture || defaultUserAvatar)
+  const onError = () => {
+    setImageUrl(defaultUserAvatar)
+  }
   return (
     <ImageBlock
       onTransitionEnd={onTransitionEnd}
@@ -72,9 +75,10 @@ const Avatar = forwardRef((props: Props, ref: any) => {
       onMouseEnter={onMouseEnter}
       sansRadius={sansRadius}
       sansShadow={sansShadow}
-      picture={picture}
+      picture={imageUrl}
       size={size}
     >
+      <img src={imageUrl} className='hidden' onError={onError} />
       {hasBadge && (
         <BadgeBlock>
           <BadgeBlockInner>