Leahnaya/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2026-03-21 18:05:23 -05:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Dock 2026-02-27 10:22:19 -05:00 committed by GitHub
parent 1e5cad072e
commit 3c8e37907d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 24 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

24
app/javascript/mastodon/components/avatar_overlay.tsx
View File

@ -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>