alt image routes

frontend/src/api/recipe.js

@@ -85,4 +85,16 @@ export const recipeAPI = {
 
     return response.data;
   },
+
+  recipeImage(recipeSlug) {
+    return `/api/recipes/${recipeSlug}/image?image_type=original`;
+  },
+
+  recipeSmallImage(recipeSlug) {
+    return `/api/recipes/${recipeSlug}/image?image_type=small`;
+  },
+
+  recipeTinyImage(recipeSlug) {
+    return `/api/recipes/${recipeSlug}/image?image_type=tiny`;
+  },
 };

frontend/src/components/MealPlan/MealPlanCard.vue

@@ -28,8 +28,8 @@
 </template>
 
 <script>
-import utils from "@/utils";
 import SearchDialog from "../UI/Search/SearchDialog";
+import { api } from "@/api";
 export default {
   components: {
     SearchDialog,
@@ -47,7 +47,7 @@ export default {
   methods: {
     getImage(slug) {
       if (slug) {
-        return utils.getImageURL(slug);
+        return api.recipes.recipeSmallImage(slug);
       }
     },
     setSlug(name, slug) {

frontend/src/components/MealPlan/MealPlanNew.vue

@@ -223,7 +223,7 @@ export default {
     },
 
     getImage(image) {
-      return utils.getImageURL(image);
+      return api.recipes.recipeSmallImage(image);
     },
 
     formatDate(date) {

frontend/src/components/Recipe/MobileRecipeCard.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script>
-import utils from "@/utils";
+import { api } from "@/api";
 export default {
   props: {
     name: String,
@@ -40,7 +40,7 @@ export default {
 
   methods: {
     getImage(image) {
-      return utils.getImageURL(image);
+      return api.recipes.recipeSmallImage(image);
     },
   },
 };

frontend/src/components/Recipe/RecipeCard.vue

@@ -42,7 +42,7 @@
 </template>
 
 <script>
-import utils from "@/utils";
+import { api } from "@/api";
 export default {
   props: {
     name: String,
@@ -57,7 +57,7 @@ export default {
   },
   methods: {
     getImage(image) {
-      return utils.getImageURL(image);
+      return api.recipes.recipeSmallImage(image);
     },
   },
 };

frontend/src/components/Recipe/RecipePrint.vue

@@ -162,6 +162,7 @@
 
 <script>
 import utils from "@/utils";
+import { api } from "@/api";
 
 export default {
   props: {
@@ -175,7 +176,7 @@ export default {
   methods: {
     getImage(image) {
       if (image) {
-        return utils.getImageURL(image) + "?rnd=" + this.imageKey;
+        return api.recipes.recipeImage(image) + "?rnd=" + this.imageKey;
       }
     },
     generateKey(item, index) {

frontend/src/components/UI/Search/SearchBar.vue

@@ -54,7 +54,7 @@
 
 <script>
 import Fuse from "fuse.js";
-import utils from "@/utils";
+import { api } from "@/api";
 
 export default {
   props: {
@@ -151,7 +151,7 @@ export default {
       );
     },
     getImage(image) {
-      return utils.getImageURL(image);
+      return api.recipes.recipeTinyImage(image);
     },
     selected(slug, name) {
       this.$emit("selected", slug, name);

frontend/src/pages/MealPlan/Planner.vue

@@ -117,7 +117,7 @@ export default {
       return utils.getDateAsTextAlt(dateObject);
     },
     getImage(image) {
-      return utils.getImageURL(image);
+      return api.recipes.recipeTinyImage(image);
     },
 
     editPlan(id) {

frontend/src/pages/MealPlan/ThisWeek.vue

@@ -52,7 +52,6 @@
 
 <script>
 import { api } from "@/api";
-import utils from "@/utils";
 export default {
   data() {
     return {
@@ -68,7 +67,7 @@ export default {
       else return 0;
     },
     getImage(image) {
-      return utils.getImageURL(image);
+      return api.recipes.recipeImage(image);
     },
   },
 };

frontend/src/pages/Recipe/ViewRecipe.vue

@@ -14,7 +14,7 @@
     <v-card v-else id="myRecipe">
       <v-img
         height="400"
-        :src="getImage(recipeDetails.image)"
+        :src="getImage(recipeDetails.slug)"
         class="d-print-none"
         :key="imageKey"
       >
@@ -71,7 +71,6 @@
 
 <script>
 import { api } from "@/api";
-import utils from "@/utils";
 import VJsoneditor from "v-jsoneditor";
 import RecipeViewer from "@/components/Recipe/RecipeViewer";
 import RecipeEditor from "@/components/Recipe/RecipeEditor";
@@ -160,7 +159,7 @@ export default {
     },
     getImage(image) {
       if (image) {
-        return utils.getImageURL(image) + "?rnd=" + this.imageKey;
+        return api.recipes.recipeImage(image) + "&rnd=" + this.imageKey;
       }
     },
     deleteRecipe() {

frontend/src/utils/index.js

@@ -50,7 +50,7 @@ const monthsShort = [
 
 export default {
   getImageURL(image) {
-    return `/api/recipes/${image}/image`;
+    return `/api/recipes/${image}/image?image_type=small`;
   },
   generateUniqueKey(item, index) {
     const uniqueKey = `${item}-${index}`;