fix: Improved fallback solution for avatar image loading failure (#1172)

This commit is contained in:
leo 2023-09-14 13:31:35 +08:00 committed by GitHub
parent fc68c81791
commit 562a571281
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,5 +1,6 @@
'use client'
import cn from 'classnames'
import { useState } from 'react'
type AvatarProps = {
name: string
@ -17,14 +18,20 @@ const Avatar = ({
}: AvatarProps) => {
const avatarClassName = 'shrink-0 flex items-center rounded-full bg-primary-600'
const style = { width: `${size}px`, height: `${size}px`, fontSize: `${size}px`, lineHeight: `${size}px` }
const [imgError, setImgError] = useState(false)
if (avatar) {
const handleError = () => {
setImgError(true)
}
if (avatar && !imgError) {
return (
<img
className={cn(avatarClassName, className)}
style={style}
alt={name}
src={avatar}
onError={handleError}
/>
)
}