AvatarUser shouldn't show broken image on unavailable avatar (#635)

Switching the img for an object tag in AvatarUser will prevent the "broken" image from being shown and will instead simply display nothing if the image fails to load.

Author: Luke Bowerman

packages/components/src/Avatar/AvatarUser.tsx

@@ -47,13 +47,13 @@ const AvatarLayout: FC<AvatarUserProps> = ({
           : `${firstInitial}${lastInitial}`}
       </AvatarInitials>
       {user && user.avatar_url && (
-        <AvatarPhoto color={color} src={user.avatar_url} />
+        <AvatarPhoto color={color} type="image/png" data={user.avatar_url} />
       )}
     </div>
   )
 }
 
-const AvatarPhoto = styled.img`
+const AvatarPhoto = styled.object`
   width: 100%;
   height: 100%;
   position: absolute;

packages/components/src/Avatar/__snapshots__/Avatar.test.tsx.snap

@@ -99,10 +99,11 @@ exports[`AvatarCombo renders Avatar and its secondary avatar 1`] = `
     >
       JS
     </div>
-    <img
+    <object
       className="c3"
       color="palette.purple400"
-      src="https://gravatar.lookercdn.com/avatar/e8ebbdf1a64411721503995731?s=156&d=blank"
+      data="https://gravatar.lookercdn.com/avatar/e8ebbdf1a64411721503995731?s=156&d=blank"
+      type="image/png"
     />
   </div>
   <div
@@ -231,10 +232,11 @@ exports[`AvatarCombo renders Avatar initials and secondary with Code icon 1`] =
     >
       JS
     </div>
-    <img
+    <object
       className="c3"
       color="palette.purple400"
-      src="https://gravatar.lookercdn.com/avatar/e8ebbdf1a64411721503995731?s=156&d=blank"
+      data="https://gravatar.lookercdn.com/avatar/e8ebbdf1a64411721503995731?s=156&d=blank"
+      type="image/png"
     />
   </div>
   <div
@@ -614,10 +616,11 @@ exports[`AvatarUser shows initials if has broken url as avatar_url 1`] = `
   >
     JS
   </div>
-  <img
+  <object
     className="c2"
     color="palette.purple400"
-    src="https://gravatar.lookercdn.com/avatar/e8ebbdf1a64411721503995731?s=156&d=blank"
+    data="https://gravatar.lookercdn.com/avatar/e8ebbdf1a64411721503995731?s=156&d=blank"
+    type="image/png"
   />
 </div>
 `;
@@ -697,10 +700,11 @@ exports[`AvatarUser shows user profile picture if it has good avatar_url  1`] =
   >
     JS
   </div>
-  <img
+  <object
     className="c2"
     color="palette.purple400"
-    src="https://gravatar.lookercdn.com/avatar/e8ebbdf1a64411721503995731?s=156&d=blank"
+    data="https://gravatar.lookercdn.com/avatar/e8ebbdf1a64411721503995731?s=156&d=blank"
+    type="image/png"
   />
 </div>
 `;