Fix avatar alt-text running into other elements on image load failure. (#38000)

app/javascript/mastodon/components/__tests__/__snapshots__/avatar_overlay-test.jsx.snap

@@ -26,6 +26,7 @@ exports[`<AvatarOverlay > renders a overlay avatar 1`] = `
     >
       <img
         alt="alice"
+        onError={[Function]}
         src="/static/alice.jpg"
       />
     </div>
@@ -44,6 +45,7 @@ exports[`<AvatarOverlay > renders a overlay avatar 1`] = `
     >
       <img
         alt="eve@blackhat.lair"
+        onError={[Function]}
         src="/static/eve.jpg"
       />
     </div>

app/javascript/mastodon/components/avatar_overlay.tsx

@@ -10,6 +10,14 @@ interface Props {
   overlaySize?: number;
 }
 
+const handleImgLoadError = (error: { currentTarget: HTMLElement }) => {
+  //
+  // When the img tag fails to load the image, set the img tag to display: none. This prevents the
+  // alt-text from overrunning the containing div.
+  //
+  error.currentTarget.style.display = 'none';
+};
+
 export const AvatarOverlay: React.FC<Props> = ({
   account,
   friend,
@@ -38,7 +46,13 @@ export const AvatarOverlay: React.FC<Props> = ({
           className='account__avatar'
           style={{ width: `${baseSize}px`, height: `${baseSize}px` }}
         >
-          {accountSrc && <img src={accountSrc} alt={account?.get('acct')} />}
+          {accountSrc && (
+            <img
+              src={accountSrc}
+              alt={account?.get('acct')}
+              onError={handleImgLoadError}
+            />
+          )}
         </div>
       </div>
       <div className='account__avatar-overlay-overlay'>
@@ -46,7 +60,13 @@ export const AvatarOverlay: React.FC<Props> = ({
           className='account__avatar'
           style={{ width: `${overlaySize}px`, height: `${overlaySize}px` }}
         >
-          {friendSrc && <img src={friendSrc} alt={friend?.get('acct')} />}
+          {friendSrc && (
+            <img
+              src={friendSrc}
+              alt={friend?.get('acct')}
+              onError={handleImgLoadError}
+            />
+          )}
         </div>
       </div>
     </div>