Add broken avatar fallback

Signed-off-by: Ajay Bura <ajbura@gmail.com>
cinnyapp · Jan 16, 2022 · f0c9a45 · f0c9a45
1 parent 62c9e27
commit f0c9a45
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/public/res/svg/image-broken.svg b/public/res/svg/image-broken.svg
diff --git a/src/app/atoms/avatar/Avatar.jsx b/src/app/atoms/avatar/Avatar.jsx
@@ -7,6 +7,8 @@ import { twemojify } from '../../../util/twemojify';
 import Text from '../text/Text';
 import RawIcon from '../system-icons/RawIcon';
 
+import ImageBrokenSVG from '../../../../public/res/svg/image-broken.svg';
+
 function Avatar({
   text, bgColor, iconSrc, iconColor, imageSrc, size,
 }) {
@@ -19,7 +21,7 @@ function Avatar({
     <div className={`avatar-container avatar-container__${size} noselect`}>
       {
         imageSrc !== null
-          ? <img draggable="false" src={imageSrc} alt="avatar" />
+          ? <img draggable="false" src={imageSrc} onError={(e) => { e.target.src = ImageBrokenSVG; }} alt="avatar" />
           : (
             <span
               style={{ backgroundColor: iconSrc === null ? bgColor : 'transparent' }}