Vue 头像库：在 Vue 中使用 DiceBear

将头像生成包装在 computed 属性中，以便让个人资料图片与响应式数据保持同步。 如需完全控制，请使用 JS 库；如需无依赖方案，请使用 HTTP API。

你可以通过 JS-Library 或 HTTP-API 在 Vue 中使用 DiceBear。

使用 JS 库

<script setup>
import { computed } from 'vue';
import { Style, Avatar } from '@dicebear/core';
import lorelei from '@dicebear/styles/lorelei.json' with { type: 'json' };

const style = new Style(lorelei);

const props = defineProps({
  seed: { type: String, default: 'Alice' },
});

const avatar = computed(() =>
  new Avatar(style, {
    seed: props.seed,
    size: 128,
    // ... 其他选项
  }).toDataUri(),
);
</script>

<template>
  <img :src="avatar" alt="头像" />
</template>

使用 HTTP API

<script setup>
import { computed } from 'vue';

const props = defineProps({
  seed: { type: String, default: 'Alice' },
});

const src = computed(() => {
  const url = new URL('https://api.dicebear.com/10.x/lorelei/svg');
  url.searchParams.set('seed', props.seed);
  url.searchParams.set('size', '128');
  // ... 其他选项
  return url.href;
});
</script>

<template>
  <img :src="src" alt="头像" />
</template>