refactor: Improved how images are loaded in menu and menu modals

25Ericcheong · May 19, 2024 · e9bdfcb · e9bdfcb
1 parent 0e79f0d
commit e9bdfcb
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 31 deletions.
diff --git a/src/assets/icons/addition.webp b/src/assets/icons/addition.webp
diff --git a/src/assets/icons/cross.webp b/src/assets/icons/cross.webp
diff --git a/src/assets/icons/menu.webp b/src/assets/icons/menu.webp
diff --git a/src/assets/icons/subtract.webp b/src/assets/icons/subtract.webp
diff --git a/src/components/menu/bingsu-menu-modal.vue b/src/components/menu/bingsu-menu-modal.vue
@@ -6,7 +6,7 @@ import {
   useMenuStore,
   type CartItemBingsu,
 } from "@/stores/useMenuStore";
-import { getImageUrlForMenu } from "@/util/image";
+import { getImageUrl } from "@/util/image";
 import { computed, ref } from "vue";
 
 const props = defineProps({
@@ -143,11 +143,23 @@ function handleBingsuConfirmation() {
         <img class="h-full w-full" src="../../assets/icons/cross.jpg" />
       </button>
     </div>
-    <img
-      :src="getImageUrlForMenu(props.bingsuImageName, 'bingsus')"
-      alt="Image of bingsu that Binq has specially created"
-      class="h-[50%] w-full mb-8"
-    />
+
+    <picture class="h-[50%] w-full mb-8">
+      <source
+        :srcset="getImageUrl(props.bingsuImageName, 'menu', 'bingsus', true)"
+        type="image/webp"
+      />
+      <source
+        :srcset="getImageUrl(props.bingsuImageName, 'menu', 'bingsus')"
+        type="image/jpg"
+      />
+      <img
+        class="w-full h-[50%]"
+        :src="getImageUrl(props.bingsuImageName, 'menu', 'bingsus')"
+        alt="Image of bingsu that Binq has specially created"
+      />
+    </picture>
+
     <section class="mx-3 text-darkorangebq">
       <div
         class="flex flex-col pb-10 border-b-4 border-darkorangebq border-solid"

diff --git a/src/components/menu/drinks-menu-modal.vue b/src/components/menu/drinks-menu-modal.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { MenuItemType } from "@/components/menu/menu-item-type";
 import { useMenuStore, type CartItemDrinks } from "@/stores/useMenuStore";
-import { getImageUrlForMenu } from "@/util/image";
+import { getImageUrl } from "@/util/image";
 import { computed, ref } from "vue";
 
 const props = defineProps({
@@ -126,11 +126,23 @@ function handleDrinksConfirmation() {
         <img class="h-full w-full" src="../../assets/icons/cross.jpg" />
       </button>
     </div>
-    <img
-      :src="getImageUrlForMenu(props.drinksImageName, 'drinks')"
-      alt="Image of drinks that Binq has specially created"
-      class="h-[40%] w-full mb-8"
-    />
+
+    <picture class="h-[40%] w-full mb-8">
+      <source
+        :srcset="getImageUrl(props.drinksImageName, 'menu', 'drinks', true)"
+        type="image/webp"
+      />
+      <source
+        :srcset="getImageUrl(props.drinksImageName, 'menu', 'drinks')"
+        type="image/jpg"
+      />
+      <img
+        class="w-full h-[40%]"
+        :src="getImageUrl(props.drinksImageName, 'menu', 'drinks')"
+        alt="Image of drinks that Binq has specially created"
+      />
+    </picture>
+
     <section class="mx-3 text-darkorangebq">
       <div
         class="flex flex-col pb-10 border-b-4 border-darkorangebq border-solid"

diff --git a/src/components/menu/menu.vue b/src/components/menu/menu.vue
@@ -7,7 +7,7 @@ import SummaryMenuModal from "@/components/menu/summary-menu-modal.vue";
 import ToppingMenu from "@/components/menu/topping-menu.vue";
 import "@/output.css";
 import { useMenuStore } from "@/stores/useMenuStore";
-import { getImageUrlForMenu } from "@/util/image";
+import { getImageUrl } from "@/util/image";
 import { storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
 
@@ -109,25 +109,49 @@ watch(
               {{ getNumberOfItemOrderByName(item.name) }}
             </div>
             <div class="w-1/3 flex pr-5">
-              <img
+              <picture
                 v-if="selectedType === MenuItemType.Bingsu"
-                class="rounded-2xl w-[160px] h-full"
-                :class="condImgHeight"
-                :src="getImageUrlForMenu(item.imageName, 'bingsus')"
-                alt="Items available on Binq's menu. It includes drinks, bingsu  sets and a variety of toppings"
-              />
-              <img
-                v-else
-                class="rounded-2xl w-[160px] h-[160px]"
-                :class="condImgHeight"
-                :src="
-                  getImageUrlForMenu(
-                    item.imageName,
-                    selectedType === MenuItemType.Drinks ? 'drinks' : 'toppings'
-                  )
-                "
-                alt="Items available on Binq's menu. It includes drinks, bingsu  sets and a variety of toppings"
-              />
+                class="w-[160px] h-full"
+              >
+                <source
+                  :srcset="getImageUrl(item.imageName, 'menu', 'bingsus', true)"
+                  type="image/webp"
+                />
+                <source
+                  :srcset="getImageUrl(item.imageName, 'menu', 'bingsus')"
+                  type="image/jpg"
+                />
+                <img
+                  class="w-[160px] h-full rounded-2xl"
+                  :src="getImageUrl(item.imageName, 'menu', 'bingsus')"
+                  alt="Items available on Binq's menu. It includes drinks, bingsu  sets and a variety of toppings"
+                />
+              </picture>
+
+              <picture v-else class="w-[160px] h-[160px]">
+                <source
+                  :srcset="
+                    getImageUrl(
+                      item.imageName,
+                      'menu',
+                      selectedType === MenuItemType.Drinks
+                        ? 'drinks'
+                        : 'toppings',
+                      true
+                    )
+                  "
+                  type="image/webp"
+                />
+                <source
+                  :srcset="getImageUrl(item.imageName, 'menu', 'bingsus')"
+                  type="image/jpg"
+                />
+                <img
+                  class="w-[160px] h-[160px] rounded-2xl"
+                  :src="getImageUrl(item.imageName, 'menu', 'bingsus')"
+                  alt="Items available on Binq's menu. It includes drinks, bingsu  sets and a variety of toppings"
+                />
+              </picture>
             </div>
             <div class="w-2/3 flex flex-col">
               <div class="pb-2 flex justify-between">