Добавлена обработка ошибок загрузки изображения в компоненте UserCard: теперь при ошибке загрузки аватара используется Gravatar. Реализовано состояние для отслеживания ошибок загрузки изображений.
This commit is contained in:
parent
bc33de2721
commit
8906ae6239
@ -1,6 +1,7 @@
|
||||
import React from 'react'
|
||||
import { sha256 } from 'js-sha256'
|
||||
import { useColorMode } from '@chakra-ui/react'
|
||||
import { useState } from 'react'
|
||||
|
||||
import { User } from '../../__data__/model'
|
||||
|
||||
@ -28,6 +29,7 @@ export const UserCard = ({
|
||||
wrapperAS?: React.ElementType<any, keyof React.JSX.IntrinsicElements>;
|
||||
}) => {
|
||||
const { colorMode } = useColorMode();
|
||||
const [imageError, setImageError] = useState(false);
|
||||
|
||||
return (
|
||||
<Wrapper
|
||||
@ -36,7 +38,14 @@ export const UserCard = ({
|
||||
width={width}
|
||||
className={!present ? 'warn' : ''}
|
||||
>
|
||||
<Avatar src={student.picture || getGravatarURL(student.email, null)} />
|
||||
<Avatar
|
||||
src={imageError ? getGravatarURL(student.email, null) : (student.picture || getGravatarURL(student.email, null))}
|
||||
onError={() => {
|
||||
if (!imageError && student.picture) {
|
||||
setImageError(true);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<p style={{
|
||||
marginTop: 6,
|
||||
color: colorMode === 'light' ? 'inherit' : 'var(--chakra-colors-gray-100)'
|
||||
|
Loading…
x
Reference in New Issue
Block a user