设置用户头像
用户头像通常存储在服务器中。音视频通话 UIKit 不知道每个用户的真实头像，因此默认使用用户名的首字母来绘制用户头像，如下所示：
| 用户静音时 | 用户发言时 |
|---|---|
 |  |
要配置自定义用户头像，可以在使用 ZegoUIKitPrebuiltCall.nvue 时，通过插槽 avatarView 来自定义用户头像视图。
说明
- 您需要根据回调参数中的用户参数为不同的用户返回不同的头像。如果硬编码一个 URL，那么每个人的头像都将是您硬编码的那个 URL。
- 用户头像可以通过 HTTPS 或 HTTP 协议的 URL 地址或 base64 编码字符串来提供。
以下是参考代码：
基本通话
// YourPage.nvue
<template>
<ZegoUIKitPrebuiltCall :appID="appID" :callID="callID" :appSign="appSign" :userID="userID" :userName="userName"
:config="config">
<template #avatarView="{ userInfo }">
<image mode="aspectFit" :style="{ width: 130, height: 130, borderRadius: 65 }"
:src="getAvatar(userInfo)" />
</template>
</ZegoUIKitPrebuiltCall>
</template>
<script lang="ts" setup>
import { ref } from "vue"
import keyCenter from "@/pages/KeyCenter";
import ZegoUIKitPrebuiltCall from "@/uni_modules/zego-PrebuiltCall/components/ZegoUIKitPrebuiltCall.nvue"
import { ZegoUIKitPrebuiltCallConfig } from "@/uni_modules/zego-PrebuiltCall"
import AvatarImg from '@/static/avatar/avatar-01.jpeg'
const appID = ref(keyCenter.getAppID());
const appSign = ref(keyCenter.getAppSign());
const userID = ref(keyCenter.getUserID());
const userName = ref(keyCenter.getUserID() + '_Nick');
const callID = ref(keyCenter.getCallID());
const config: ZegoUIKitPrebuiltCallConfig = {
...ZegoUIKitPrebuiltCallConfig.oneOnOneVideoCall(),
onHangUp: () => {
// 挂断后返回上一页
uni.navigateBack()
},
};
// 根据 userInfo.userID 判断应该返回的头像地址, 这里简单处理
function getAvatar(userInfo) {
return AvatarImg
}
</script>
1
完成后，音视频通话 UIKit 将显示您设置的自定义用户头像。