添加登录后显示用户头像

web/src/components/NavBar.vue

@@ -27,6 +27,7 @@
             >
           </li>
         </ul>
+
         <!-- 判断是否登录成功:如果登录成功,则修改导航栏这部分内容 -->
         <ul class="navbar-nav" v-if="$store.state.user.is_login">
           <!-- 下拉菜单样式 -->
@@ -38,7 +39,8 @@
               data-bs-toggle="dropdown"
               aria-expanded="false"
             >
-              {{ $store.state.user.username }}
+              <img class="user_photo" :src="$store.state.user.photo" alt="" />
+              <!-- {{ $store.state.user.username }} -->
             </a>
             <ul class="dropdown-menu">
               <li>
@@ -109,4 +111,13 @@ export default {
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+.user_photo {
+  width: 30px;
+  height: 30px;
+  border-radius: 15%;
+  margin: auto;
+  /* display: flex;
+  align-items: center; */
+}
+</style>