chongqing-app/src/pages/attendance/components/UserAvatar.vue

<template>
  <view class="user-avatar">
    <image class="user-avatar-content" v-if="avatarLink && showImg" :src="avatarLink" @load="imageLoad" @error="imageLoadError" />
    <view class="user-avatar-content" :style="{ background: getAvatarGradient(userName) }"  v-else>{{ getUserIndexChat() }}</view>
  </view>
</template>

<script>
import { getAvatarGradient } from '@/utils/handler'
export default {
  props: {
    avatarLink: {
      type: String,
      default: ''
    },
    userName: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      showImg: true
    }
  },
  methods: {
    getAvatarGradient,
    getUserIndexChat () {
      return this.userName ? this.userName.split('')[0] : '用'
    },
    imageLoad () {
      this.showImg = true
    },
    imageLoadError () {
      this.showImg = false
    }
  }
}
</script>

<style lang="scss" scoped>
.user-avatar {
  width: 100%;
  height: 100%;
  &-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 500;
  }
}
</style>