uniapp圆形头像
实现圆形头像的方法
在UniApp中实现圆形头像可以通过CSS样式或组件属性调整。以下是几种常见方法：
使用CSS border-radius属性
通过设置图片的border-radius为50%实现圆形效果：
<image class="avatar" src="/static/avatar.jpg"></image>.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
}使用uView UI组件库
若项目使用uView组件库，可直接使用u-avatar组件：
<u-avatar
src="/static/avatar.jpg"
size="80"
mode="circle"
></u-avatar>结合flex布局居中显示
圆形头像通常需要居中显示，可配合flex布局：
<view class="avatar-container">
<image class="avatar" src="/static/avatar.jpg"></image>
</view>.avatar-container {
display: flex;
justify-content: center;
align-items: center;
}
.avatar {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
}处理网络图片的占位问题
网络图片加载时需要占位图：
<image
class="avatar"
:src="userInfo.avatar || '/static/default-avatar.png'"
mode="aspectFill"
></image>注意事项
- 确保图片宽高相同，否则圆形会变形
- 对于非方形图片，建议添加
mode="aspectFill"属性保持比例 - 在微信小程序中，部分旧版本可能需要添加
overflow: hidden样式 - 使用组件库时注意查看文档，不同组件库的圆形属性可能不同（如
round或circle）
