Vuetify:如何将头像或图标添加到导航抽屉的底部

<template>
  <v-app>
    <v-navigation-drawer app>
      <!-- 其他导航项 -->
      <v-list-item v-for="item in items" :key="item.title" :to="item.path">
        <v-list-item-icon>
          <v-icon>{{ item.icon }}</v-icon>
        </v-list-item-icon>
        <v-list-item-content>
          <v-list-item-title>{{ item.title }}</v-list-item-title>
        </v-list-item-content>
      </v-list-item>

      <!-- 分隔线 -->
      <v-divider></v-divider>

      <!-- 头像或图标 -->
      <v-list-item>
        <v-list-item-avatar>
          <img src="path/to/avatar.jpg" alt="Avatar">
        </v-list-item-avatar>
        <v-list-item-content>
          <v-list-item-title>用户名</v-list-item-title>
        </v-list-item-content>
      </v-list-item>

      <!-- 其他底部项 -->
      <v-list-item @click="logout">
        <v-list-item-icon>
          <v-icon>mdi-logout</v-icon>
        </v-list-item-icon>
        <v-list-item-content>
          <v-list-item-title>Logout</v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </v-navigation-drawer>

    <v-app-bar app>
      <!-- App bar content -->
    </v-app-bar>

    <v-main>
      <!-- Main content -->
    </v-main>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { title: 'Home', icon: 'mdi-home', path: '/' },
        { title: 'About', icon: 'mdi-help-box', path: '/about' },
        // 其他导航项
      ],
    };
  },
  methods: {
    logout() {
      // 注销逻辑
    },
  },
};
</script>