uniapp定义圆形头像

在uniapp中，可以使用以下代码定义一个圆形头像：

<template>
  <div class="avatar">
    <img :src="avatarUrl" alt="avatar" class="avatar-img">
  </div>
</template>

<style>
  .avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
  }
  .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>

<script>
  export default {
    data() {
      return {
        avatarUrl: 'https://example.com/avatar.png'
      }
    }
  }
</script>

在上面的代码中，我们使用了 `border-radius` 属性将 `div` 元素的边角设置为50%。这样，`div` 就变成了一个圆形，同时使用 `overflow: hidden` 属性将图像超出圆形部分的部分隐藏起来。最后，我们使用 `object-fit: cover` 属性将图像缩放以填充整个圆形区域。