Fix avatars not using image tags in web UI (#19488)

Fix #19483

1 files changed, 8 insertions, 18 deletions

diff --git a/app/javascript/mastodon/components/avatar.js b/app/javascript/mastodon/components/avatar.js
index dd3932ae6..207b26691 100644
--- a/app/javascript/mastodon/components/avatar.js
+++ b/app/javascript/mastodon/components/avatar.js
@@ -42,30 +42,20 @@ export default class Avatar extends React.PureComponent {
       ...this.props.style,
       width: `${size}px`,
       height: `${size}px`,
-      backgroundSize: `${size}px ${size}px`,
     };
 
-    if (account) {
-      const src = account.get('avatar');
-      const staticSrc = account.get('avatar_static');
+    let src;
 
-      if (hovering || animate) {
-        style.backgroundImage = `url(${src})`;
-      } else {
-        style.backgroundImage = `url(${staticSrc})`;
-      }
+    if (hovering || animate) {
+      src = account?.get('avatar');
+    } else {
+      src = account?.get('avatar_static');
     }
 
-
     return (
-      <div
-        className={classNames('account__avatar', { 'account__avatar-inline': inline })}
-        onMouseEnter={this.handleMouseEnter}
-        onMouseLeave={this.handleMouseLeave}
-        style={style}
-        role='img'
-        aria-label={account?.get('acct')}
-      />
+      <div className={classNames('account__avatar', { 'account__avatar-inline': inline })} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} style={style}>
+        <img src={src} alt={account?.get('acct')} />
+      </div>
     );
   }