# 将 DiceBear 用作头像占位符 API 头像占位符用于替代用户尚未上传头像时显示的通用默认图标。DiceBear 不会显示灰色剪影,而是根据任意种子生成独特且确定性的 SVG 头像,因此每位用户从注册开始就能拥有一张专属图片。 ## 为什么选择 DiceBear 作为占位符? ## 使用 HTTP API 最简单的方法:将 DiceBear API URL 作为 `` 标签的 `src`。使用稳定的标识符作为种子值。数字用户 ID 效果很好。有关完整选项和速率限制详情,请参阅 [HTTP API 文档](https://dicebear.zhcndoc.com/how-to-use/http-api/)。 - `https://api.dicebear.com/10.x/initials/svg?seed=JD` - `https://api.dicebear.com/10.x/pixel-art/svg?seed=user-42` ```html 用户头像 ``` ### 图像加载出错时的回退方案 将 DiceBear 与 `onerror` 处理程序结合使用,以便用户上传的照片加载失败时能够平稳地回退: ```html 用户头像 ``` ### 使用用户 ID 作为种子值 将稳定且唯一的标识符作为种子值传入,以确保每位用户始终获得相同的占位头像: ```js const userId = 'user-8f3a2c'; const avatarUrl = `https://api.dicebear.com/10.x/thumbs/svg?seed=${encodeURIComponent(userId)}`; ``` - `https://api.dicebear.com/10.x/thumbs/svg?seed=user-8f3a2c` ## 使用 JavaScript 库 使用 JS 库在服务器上渲染,或将 SVG 直接嵌入标记中,而无需发起额外的 HTTP 请求。如需完整的安装和 API 详细信息,请参阅 [JavaScript 库文档](https://dicebear.zhcndoc.com/how-to-use/js-library/)。 ```js import { Style, Avatar } from '@dicebear/core'; import thumbs from '@dicebear/styles/thumbs.json' with { type: 'json' }; const style = new Style(thumbs); function getPlaceholderAvatar(userId) { return new Avatar(style, { seed: userId, size: 48, borderRadius: 50, }).toString(); } ``` ## 使用 PHP 库 使用 PHP 库进行服务器端渲染,无需额外的 HTTP 请求。有关完整的安装和 API 详情,请参阅 [PHP 库文档](https://dicebear.zhcndoc.com/how-to-use/php-library/)。 ```php $userId, 'size' => 48, 'borderRadius' => 50, ]); } ``` ## 使用 Python 库 使用 Python 库进行服务端渲染,而无需额外的 HTTP 请求。关于完整的安装和 API 详情,请参阅 [Python 库文档](https://dicebear.zhcndoc.com/how-to-use/python-library/)。 ```python from importlib.resources import files from dicebear import Avatar, Style style = Style.from_json( files("dicebear_styles").joinpath("thumbs.json").read_text("utf-8") ) def get_placeholder_avatar(user_id: str) -> str: return Avatar(style, { "seed": user_id, "size": 48, "borderRadius": 50, }).to_string() ``` ## 使用 Rust 库 使用 Rust 库进行服务端渲染,而无需额外的 HTTP 请求。关于完整的安装和 API 详情,请参阅 [Rust 库文档](https://dicebear.zhcndoc.com/how-to-use/rust-library/)。 ```rust use dicebear_core::{Avatar, Error, Style}; use serde_json::json; let style = Style::from_str(dicebear_styles::THUMBS)?; fn placeholder_avatar(style: &Style, user_id: &str) -> Result { let avatar = Avatar::new(style, json!({ "seed": user_id, "size": 48, "borderRadius": 50, }))?; Ok(avatar.to_string()) } ``` ## 使用 Go 库 使用 Go 库进行服务端渲染,而无需额外的 HTTP 请求。 关于完整的安装和 API 详情,请参阅 [Go 库文档](https://dicebear.zhcndoc.com/how-to-use/go-library/)。 ```go import ( dicebear "github.com/dicebear/dicebear-go/v10" "github.com/dicebear/styles/v10" ) style, _ := dicebear.NewStyle([]byte(styles.Thumbs)) func placeholderAvatar(style *dicebear.Style, userID string) (string, error) { avatar, err := dicebear.NewAvatar(style, map[string]any{ "seed": userID, "size": 48, "borderRadius": 50, }) if err != nil { return "", err } return avatar.SVG(), nil } ``` ## 使用 Dart 库 使用 Dart 库进行服务端渲染,而无需额外的 HTTP 请求。有关完整的安装和 API 详情,请参阅 [Dart 库文档](https://dicebear.zhcndoc.com/how-to-use/dart-library/)。 ```dart import 'package:dicebear_core/dicebear_core.dart'; import 'package:dicebear_styles/thumbs.dart'; final style = Style.parse(thumbs); String getPlaceholderAvatar(String userId) { return Avatar(style, { 'seed': userId, 'size': 48, 'borderRadius': 50, }).svg; } ``` ## 选择一种样式 不同样式适用于不同的使用场景。点击某个样式即可查看所有可用选项。 ## 提示:始终指定尺寸 指定 `size` 或 CSS 尺寸,以避免头像加载时发生布局偏移: ```js // JS 库 new Avatar(style, { seed: userId, size: 48, borderRadius: 50 }); ``` ```php // PHP 库 new Avatar($style, ['seed' => $userId, 'size' => 48, 'borderRadius' => 50]); ``` ```python # Python 库 Avatar(style, {"seed": user_id, "size": 48, "borderRadius": 50}) ``` ```rust // Rust 库 Avatar::new(&style, json!({ "seed": user_id, "size": 48, "borderRadius": 50 }))?; ``` ```go // Go 库 dicebear.NewAvatar(style, map[string]any{"seed": userID, "size": 48, "borderRadius": 50}) ``` ```dart // Dart 库 Avatar(style, {'seed': userId, 'size': 48, 'borderRadius': 50}); ``` ``` // HTTP API https://api.dicebear.com/10.x/thumbs/svg?seed=user-123&size=48&borderRadius=50 ```