vue-admin-template处理头像为空的情况

1.升级一下vue版本

npm i vue@2.7.0

npm i vue-template-compiler@2.7.0

2.添加条件可选，使用？.可选操作符避免空置报错

<img v-if="avatar" :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">

<span v-else class="username">{{ name?.charAt(0) }}</span>

样式如下——

.username {

width: 30px;

height: 30px;

line-height: 30px;

text-align: center;

background-color:#04c9bc;

color:#fff;

border-radius: 50%;

margin-right: 4px;

}

效果如下