fallback to icon when no image (#414)

Co-authored-by: hay-kot <hay-kot@pm.me>

frontend/src/components/Recipe/MobileRecipeCard.vue

@@ -1,14 +1,16 @@
 <template>
   <v-card :ripple="false" class="mx-auto" hover :to="`/recipe/${slug}`" @click="$emit('selected')">
     <v-list-item three-line>
-      <v-list-item-avatar tile size="125" color="grey" class="v-mobile-img rounded-sm my-0 ml-n4">
-        <v-img :src="getImage(slug)" lazy-src=""></v-img
-      ></v-list-item-avatar>
+      <v-list-item-avatar tile size="125" class="v-mobile-img rounded-sm my-0 ml-n4">
+        <v-img v-if="!fallBackImage" :src="getImage(slug)" @error="fallBackImage = true"></v-img>
+        <v-icon color="primary" class="icon-position" size="100">
+          mdi-silverware-variant
+        </v-icon>
+      </v-list-item-avatar>
       <v-list-item-content>
         <v-list-item-title class=" mb-1">{{ name }} </v-list-item-title>
         <v-list-item-subtitle> {{ description }} </v-list-item-subtitle>
         <div class="d-flex justify-center align-center">
-          <RecipeChips :truncate="true" :items="tags" :title="false" :limit="1" :small="true" :isCategory="false" />
           <v-rating
             color="secondary"
             class="ml-auto"
@@ -18,6 +20,7 @@
             size="15"
             :value="rating"
           ></v-rating>
+          <v-spacer></v-spacer>
           <ContextMenu :slug="slug" menu-icon="mdi-dots-horizontal" />
         </div>
       </v-list-item-content>
@@ -26,12 +29,10 @@
 </template>
 
 <script>
-import RecipeChips from "@/components/Recipe/RecipeViewer/RecipeChips";
 import ContextMenu from "@/components/Recipe/ContextMenu";
 import { api } from "@/api";
 export default {
   components: {
-    RecipeChips,
     ContextMenu,
   },
   props: {
@@ -47,7 +48,11 @@ export default {
       default: true,
     },
   },
-
+  data() {
+    return {
+      fallBackImage: false,
+    };
+  },
   methods: {
     getImage(image) {
       return api.recipes.recipeSmallImage(image);