如何通过Discord API直接获取pfp 并在React项目展示机器人头像

1. 头像资源请求URL规则 #

所有Discord用户（含机器人）的头像都可以通过固定规则拼接CDN地址直接访问，无需额外鉴权：

• 自定义头像拼接格式：https://cdn.discordapp.com/avatars/{用户ID}/{头像哈希}.{格式}?size={尺寸}
  各参数说明：
  • {用户ID}：对应机器人/目标用户的唯一数字ID，可在Discord客户端开启开发者模式后右键复制
  • {头像哈希}：用户头像的唯一标识，可通过Discord用户接口查询获取，若哈希以a_开头说明是动图
  • {格式}：支持png、jpg、webp、gif，动图需指定为gif才会展示动态效果
  • {尺寸}：可选16、32、64、128、256、512、1024、2048、4096，按需填写即可
• 默认头像回退地址：如果用户没有设置自定义头像，使用https://cdn.discordapp.com/embed/avatars/{用户ID%5}.png即可获取系统分配的默认头像

2. 权限要求说明 #

• 若仅需要展示机器人的公开头像，不需要申请任何scope权限。你只需要调用GET /users/{机器人ID}接口即可拿到机器人的头像哈希，请求该接口时仅需要在请求头携带Authorization: Bot 你的机器人token即可，无额外授权要求
• 若需要获取登录你站点的普通Discord用户的头像，只需要在OAuth2授权流程中添加identify scope，用户授权后你就能拿到该用户的ID和头像哈希，按上述规则拼接地址即可使用

3. React 实现示例 #

固定展示机器人头像 #

// 替换参数为你的机器人实际信息即可直接使用
function DiscordBotAvatar() {
  const botAvatarUrl = "https://cdn.discordapp.com/avatars/你的机器人ID/你的机器人头像哈希.png?size=256";
  return <img src={botAvatarUrl} alt="Discord机器人头像" style={{ borderRadius: '50%', width: '64px', height: '64px' }} />;
}

动态展示用户头像（适配默认头像+动图） #

// userId、avatarHash为从接口获取的用户信息
function DiscordUserAvatar({ userId, avatarHash }) {
  const isAnimated = avatarHash?.startsWith('a_');
  const format = isAnimated ? 'gif' : 'png';
  const avatarUrl = avatarHash 
    ? `https://cdn.discordapp.com/avatars/${userId}/${avatarHash}.${format}?size=256`
    : `https://cdn.discordapp.com/embed/avatars/${Number(userId) % 5}.png`;
  
  return <img src={avatarUrl} alt="Discord用户头像" />;
}

4. 注意事项 #

• Discord头像CDN资源默认支持跨域访问，你的React站点不需要额外配置CORS即可直接加载
• 头像哈希会在用户更换头像时更新，若需要保持头像最新，可定期调用用户接口刷新哈希值

内容的提问来源于stack exchange，提问作者wannabemathematician