# 将 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
```