user image fixes

frontend/src/api/users.js

@@ -113,6 +113,11 @@ export const userAPI = {
     const response = await apiReq.delete(API_ROUTES.usersIdFavoritesSlug(id, slug));
     return response.data;
   },
+
+  userProfileImage(id) {
+    if (!id || id === undefined) return;
+    return `/api/users/${id}/image`;
+  },
 };
 
 const deleteErrorText = response => {

frontend/src/components/Recipe/CommentSection/index.vue

@@ -91,7 +91,7 @@ export default {
       this.hideImage == false;
     },
     getProfileImage(id) {
-      return `api/users/${id}/image`;
+      return api.users.userProfileImage(id);
     },
     editComment(id) {
       this.$set(this.editKeys, id, true);

frontend/src/components/UI/TheSidebar.vue

@@ -2,19 +2,7 @@
   <div class="d-print-none no-print">
     <v-navigation-drawer v-model="showSidebar" width="180px" clipped app>
       <template v-slot:prepend>
-        <v-list-item two-line v-if="isLoggedIn" to="/admin/profile">
-          <v-list-item-avatar color="accent" class="white--text">
-            <img :src="userProfileImage" v-if="!hideImage" @error="hideImage = true" />
-            <div v-else>
-              {{ initials }}
-            </div>
-          </v-list-item-avatar>
-
-          <v-list-item-content>
-            <v-list-item-title> {{ user.fullName }}</v-list-item-title>
-            <v-list-item-subtitle> {{ user.admin ? $t("user.admin") : $t("user.user") }}</v-list-item-subtitle>
-          </v-list-item-content>
-        </v-list-item>
+        <UserAvatar v-if="isLoggedIn" :user="user" />
 
         <v-list-item dense v-if="isLoggedIn" :to="`/user/${user.id}/favorites`">
           <v-list-item-icon>
@@ -46,7 +34,7 @@
               mdi-heart
             </v-icon>
           </v-list-item-icon>
-          <v-list-item-title> {{$t('about.support')}} </v-list-item-title>
+          <v-list-item-title> {{ $t("about.support") }} </v-list-item-title>
         </v-list-item>
         <v-list-item to="/admin/about">
           <v-list-item-icon class="mr-3 pt-1">
@@ -78,10 +66,14 @@
 </template>
 
 <script>
+import UserAvatar from "@/components/User/UserAvatar";
 import { initials } from "@/mixins/initials";
 import { user } from "@/mixins/user";
 import axios from "axios";
 export default {
+  components: {
+    UserAvatar,
+  },
   mixins: [initials, user],
   data() {
     return {

frontend/src/components/User/UserAvatar.vue

@@ -0,0 +1,61 @@
+<template>
+  <v-list-item two-line to="/admin/profile">
+    <v-list-item-avatar color="accent" class="white--text">
+      <v-img :src="profileImage" v-if="!noImage" />
+      <div v-else>
+        {{ initials }}
+      </div>
+    </v-list-item-avatar>
+
+    <v-list-item-content>
+      <v-list-item-title> {{ user.fullName }}</v-list-item-title>
+      <v-list-item-subtitle> {{ user.admin ? $t("user.admin") : $t("user.user") }}</v-list-item-subtitle>
+    </v-list-item-content>
+  </v-list-item>
+</template>
+
+<script>
+import { initials } from "@/mixins/initials";
+import axios from "axios";
+import { api } from "@/api";
+export default {
+  mixins: [initials],
+  props: {
+    user: {
+      type: Object,
+    },
+  },
+  data() {
+    return {
+      noImage: false,
+      profileImage: "",
+    };
+  },
+  watch: {
+    async user() {
+      this.setImage();
+    },
+  },
+  methods: {
+    async setImage() {
+      const userImageURL = api.users.userProfileImage(this.user.id);
+      if (await this.imageExists(userImageURL)) {
+        this.noImage = false;
+        this.profileImage = userImageURL;
+      } else {
+        this.noImage = true;
+      }
+    },
+    async imageExists(url) {
+      const response = await axios.get(url).catch(() => {
+        this.noImage = true;
+        return { status: 404 };
+      });
+      return response.status !== 404;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

frontend/src/pages/Admin/Profile/ProfileThemeCard.vue

@@ -73,8 +73,7 @@
         </v-virtual-scroll>
         <v-divider></v-divider>
         <v-card-actions>
-          <v-spacer></v-spacer>
-          <TheButton class="mt-1 mb-n1" create @click="createTheme" />
+          <TheButton class="ml-auto mt-1 mb-n1" create @click="createTheme" />
         </v-card-actions>
       </template>
     </StatCard>

frontend/src/pages/Admin/Profile/UserCard.vue

@@ -134,7 +134,7 @@ export default {
 
   computed: {
     userProfileImage() {
-      return `api/users/${this.user.id}/image`;
+      return api.users.userProfileImage(this.user.id);
     },
   },
 

mealie/routes/users/crud.py

@@ -91,7 +91,7 @@ async def get_user_image(id: str):
     for recipe_image in user_dir.glob("profile_image.*"):
         return FileResponse(recipe_image)
     else:
-        return False
+        raise HTTPException(status.HTTP_404_NOT_FOUND)
 
 
 @router.post("/{id}/image", dependencies=[Depends(get_current_user)])