gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix broken image url after submission on profile page (#42507)

Browse Source
This commit is contained in:
Ismail Tlemcani
2021-07-12 12:26:10 +01:00
committed by GitHub
parent f6455db7b8
commit 4307179d00
1 changed files with 15 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
client/src/components/helpers/avatar-renderer.tsx
View File

@ -1,4 +1,4 @@
import React from 'react'; import React, { useState, useEffect } from 'react';
import { Image } from '@freecodecamp/react-bootstrap'; import { Image } from '@freecodecamp/react-bootstrap';
import DefaultAvatar from '../../assets/icons/default-avatar'; import DefaultAvatar from '../../assets/icons/default-avatar';
import { defaultUserImage } from '../../../../config/misc'; import { defaultUserImage } from '../../../../config/misc';
@ -19,9 +19,22 @@ function AvatarRenderer({
isTopContributor isTopContributor
}: AvatarRendererProps): JSX.Element { }: AvatarRendererProps): JSX.Element {
const { t } = useTranslation(); const { t } = useTranslation();
const [isPictureValid, setIsPictureValid] = useState(true);
const borderColor: string = borderColorPicker(isDonating, isTopContributor); const borderColor: string = borderColorPicker(isDonating, isTopContributor);
const onImageLoad = () => setIsPictureValid(true);
const onImageError = () => setIsPictureValid(false);
useEffect(() => {
const validationImage = document.createElement('img');
validationImage.src = picture;
validationImage.onload = onImageLoad;
validationImage.onerror = onImageError;
}, [picture]);
const isPlaceHolderImage = const isPlaceHolderImage =
/example.com|identicon.org/.test(picture) || picture === defaultUserImage; !isPictureValid ||
/example.com|identicon.org/.test(picture) ||
picture === defaultUserImage;
return ( return (
<div className={`avatar-container ${borderColor}`}> <div className={`avatar-container ${borderColor}`}>