use <img> instead of <div> for avatars

This lets you right click steal them more easily
This commit is contained in:
Kay Faraday 2022-01-13 18:12:23 +00:00
parent e8cfabcf92
commit a34b7d3b5e
3 changed files with 11 additions and 11 deletions

View File

@ -57,14 +57,14 @@ export default class Avatar extends React.PureComponent {
backgroundSize: `${size}px ${size}px`, backgroundSize: `${size}px ${size}px`,
}; };
let imageSrc = staticSrc;
if (hovering || animate) { if (hovering || animate) {
style.backgroundImage = `url(${src})`; imageSrc = src;
} else {
style.backgroundImage = `url(${staticSrc})`;
} }
return ( return (
<div <img
src={imageSrc}
className={computedClass} className={computedClass}
onMouseEnter={this.handleMouseEnter} onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave} onMouseLeave={this.handleMouseLeave}

View File

@ -67,6 +67,8 @@ export default class AvatarComposite extends React.PureComponent {
} }
} }
const imageSrc = account.get(animate ? 'avatar' : 'avatar_static');
const style = { const style = {
left: left, left: left,
top: top, top: top,
@ -74,8 +76,6 @@ export default class AvatarComposite extends React.PureComponent {
bottom: bottom, bottom: bottom,
width: `${width}%`, width: `${width}%`,
height: `${height}%`, height: `${height}%`,
backgroundSize: 'cover',
backgroundImage: `url(${account.get(animate ? 'avatar' : 'avatar_static')})`,
}; };
return ( return (
@ -86,7 +86,7 @@ export default class AvatarComposite extends React.PureComponent {
title={`@${account.get('acct')}`} title={`@${account.get('acct')}`}
key={account.get('id')} key={account.get('id')}
> >
<div style={style} data-avatar-of={`@${account.get('acct')}`} /> <img src={imageSrc} style={style} data-avatar-of={`@${account.get('acct')}`} />
</a> </a>
); );
} }

View File

@ -53,14 +53,14 @@ export default class Avatar extends React.PureComponent {
backgroundSize: `${size}px ${size}px`, backgroundSize: `${size}px ${size}px`,
}; };
let imageSrc = staticSrc;
if (hovering || animate) { if (hovering || animate) {
style.backgroundImage = `url(${src})`; imageSrc = src;
} else {
style.backgroundImage = `url(${staticSrc})`;
} }
return ( return (
<div <img
src={imageSrc}
className={className} className={className}
onMouseEnter={this.handleMouseEnter} onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave} onMouseLeave={this.handleMouseLeave}