27 lines
1.0 KiB
TypeScript
27 lines
1.0 KiB
TypeScript
/**
|
|
* 头像的轻量显示降级：指定URL加载失败时用名字首段的大写表示，新的URL可重新尝试。
|
|
* 失败标记仅属当前组件，不写用户资料，也不把一次图片失败当成账户失效。
|
|
*/
|
|
"use client";
|
|
|
|
import { useState } from "react";
|
|
import styles from "./workspace.module.css";
|
|
|
|
/** 同一失败URL不反复重载；large仅控制尺寸，图片不发送Referrer，alt保留用户身份文本。 */
|
|
export function UserAvatar({ name, url, large = false }: {
|
|
name: string;
|
|
url?: string | null;
|
|
large?: boolean;
|
|
}) {
|
|
const [failedUrl, setFailedUrl] = useState<string | null>(null);
|
|
const showImage = Boolean(url && url !== failedUrl);
|
|
return (
|
|
<span className={`${styles.avatar} ${large ? styles.avatarLarge : ""}`}>
|
|
{showImage ? (
|
|
<img src={url!} alt={`${name}的头像`} width={large ? 36 : 24} height={large ? 36 : 24}
|
|
referrerPolicy="no-referrer" onError={() => setFailedUrl(url!)} />
|
|
) : <span aria-hidden="true">{name.slice(0, 1).toUpperCase()}</span>}
|
|
</span>
|
|
);
|
|
}
|