---
title: "Gravatar"
description: "在你的 Nuxt 应用中使用 Gravatar。"
canonical_url: "https://nuxt-scripts.zhcndoc.com/scripts/gravatar"
last_updated: "2026-05-22T14:11:53.987Z"
---

[Gravatar](https://gravatar.com) 提供与邮箱地址关联的全球通用头像。Nuxt Scripts 提供了一种保护隐私的集成方案，通过你自己的服务器代理头像请求，防止 Gravatar 追踪你的用户。

<script-stats>



</script-stats>

<script-docs>



</script-docs>

<callout type="info">

当配置了 `NUXT_SCRIPTS_PROXY_SECRET` 时，该脚本的代理端点会使用 [HMAC URL 签名](/docs/guides/first-party#proxy-endpoint-security)。请参阅 [安全指南](/docs/guides/first-party#proxy-endpoint-security) 获取设置说明。

</callout>

## [`<ScriptGravatar>`](/scripts/gravatar)

[`<ScriptGravatar>`](/scripts/gravatar) 组件会为给定的邮箱地址渲染 Gravatar 头像。所有请求都会通过你的服务器代理发送 — Gravatar 永远不会看到你的用户的 IP 地址或请求头。

### 演示

<code-group>
<gravatar-demo label="输出">



</gravatar-demo>

```vue [输入]
<template>
  <ScriptGravatar
    email="info@gravatar.com"
    :size="80"
    class="rounded-full"
  />
</template>
```

</code-group>

### 组件 API

请查看 [Facade Component API](/docs/guides/facade-components#facade-components-api) 了解完整的属性、事件和插槽。

### 属性

<table>
<thead>
  <tr>
    <th>
      属性
    </th>
    
    <th>
      类型
    </th>
    
    <th>
      默认值
    </th>
    
    <th>
      说明
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        email
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      邮箱地址，发送到你的服务器代理进行哈希处理，不会发送给 Gravatar
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        hash
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      预先计算的邮箱 SHA256 哈希值（<code>
        email
      </code>
      
       的替代选项）
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        size
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        80
      </code>
    </td>
    
    <td>
      头像尺寸（像素）
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        default
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'mp'
      </code>
    </td>
    
    <td>
      当没有 Gravatar 存在时的默认头像样式
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        rating
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'g'
      </code>
    </td>
    
    <td>
      内容评级过滤器
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        hovercards
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      悬停时启用悬停卡片
    </td>
  </tr>
</tbody>
</table>

## [`useScriptGravatar()`](/scripts/gravatar)

[`useScriptGravatar()`](/scripts/gravatar) 组合式函数让你能够以编程方式与 Gravatar API 交互。

```ts
export function useScriptGravatar<T extends GravatarApi>(_options?: GravatarInput) {}
```

请遵循 [Registry Scripts](/docs/guides/registry-scripts) 指南以了解更多高级用法。

<script-types>



</script-types>

## 示例

使用组合式函数直接获取头像 URL。

```vue
<script setup lang="ts">
const { onLoaded } = useScriptGravatar()

const avatarUrl = ref('')

onLoaded((api) => {
  avatarUrl.value = api.getAvatarUrlFromEmail('user@example.com', { size: 120 })
})
</script>

<template>
  <img v-if="avatarUrl" :src="avatarUrl" alt="User avatar">
</template>
```