greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

pull/42830/head
Ismail Tlemcani 2021-07-12 12:26:10 +01:00 committed by GitHub
parent f6455db7b8
commit 4307179d00
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 2 deletions
Show Stats 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 DefaultAvatar from '../../assets/icons/default-avatar';
import { defaultUserImage } from '../../../../config/misc';
@ -19,9 +19,22 @@ function AvatarRenderer({
isTopContributor
}: AvatarRendererProps): JSX.Element {
const { t } = useTranslation();
const [isPictureValid, setIsPictureValid] = useState(true);
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 =
/example.com|identicon.org/.test(picture) || picture === defaultUserImage;
!isPictureValid ||
/example.com|identicon.org/.test(picture) ||
picture === defaultUserImage;
return (
<div className={`avatar-container ${borderColor}`}>