From 4307179d00890cd37ee87eba60f966723cdc9022 Mon Sep 17 00:00:00 2001 From: Ismail Tlemcani <34961373+Ismailtlem@users.noreply.github.com> Date: Mon, 12 Jul 2021 12:26:10 +0100 Subject: [PATCH] fix broken image url after submission on profile page (#42507) --- .../src/components/helpers/avatar-renderer.tsx | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/client/src/components/helpers/avatar-renderer.tsx b/client/src/components/helpers/avatar-renderer.tsx index 1c7d598795a..fb847c83f9d 100644 --- a/client/src/components/helpers/avatar-renderer.tsx +++ b/client/src/components/helpers/avatar-renderer.tsx @@ -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 (