Skip to content

Commit

Permalink
fix: fallback for missing avatar images (#9603)
Browse files Browse the repository at this point in the history
Signed-off-by: Matt Krick <[email protected]>
  • Loading branch information
mattkrick authored Apr 5, 2024
1 parent 89aeea3 commit 1a7e298
Showing 1 changed file with 8 additions and 4 deletions.
12 changes: 8 additions & 4 deletions packages/client/components/Avatar/Avatar.tsx
Original file line number Diff line number Diff line change
@@ -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',
Expand Down Expand Up @@ -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}
Expand All @@ -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>
Expand Down

0 comments on commit 1a7e298

Please sign in to comment.