refactor: use nuxtimg to improve performances

app/components/AppBody.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { z } from "zod";
 import { LazyApiModal } from "#components";
-import type { SelectMenuItem } from "@nuxt/ui";
 
 const qrCode = ref("/default.webp");
 const form = useTemplateRef("form");
@@ -12,19 +11,22 @@ const apiModal = overlay.create(LazyApiModal);
 
 const isQRCodeEmpty = computed(() => qrCode.value === "/default.webp");
 
-const { data: logos } = await useFetch<string[]>("/api/logos");
+const { data: logos } = await useFetch("/api/logos");
 
-const logoItems = computed<SelectMenuItem[]>(() =>
-  (logos.value ?? []).map((name) => ({
-    label: name,
-    value: name,
-    avatar: { src: `/icons/${name}.png`, alt: name },
-  })),
+const logoItems = computed(
+  () =>
+    logos.value?.map((name) => ({
+      label: name,
+      value: name,
+      avatar: { src: `/logos/${name}.png`, alt: name },
+    })) ?? [],
 );
 
 const selectedLogoItem = computed({
-  get: () => logoItems.value.find((i) => i.value === formState.logo),
-  set: (item) => { formState.logo = item?.value as string | undefined; },
+  get: () => logoItems.value?.find((i) => i.value === formState.logo),
+  set: (item) => {
+    formState.logo = item?.value as string | undefined;
+  },
 });
 
 const formSchema = z
@@ -159,13 +161,19 @@ const {
             class="w-full"
           >
             <template #leading>
-              <img
+              <NuxtImg
                 v-if="selectedLogoItem"
                 :src="selectedLogoItem.avatar?.src"
                 :alt="selectedLogoItem.label"
-                class="size-4 dark:invert"
+                width="16"
+                height="16"
+                class="dark:invert"
+              />
+              <UIcon
+                v-else
+                name="i-heroicons-photo"
+                class="size-4 text-dimmed"
               />
-              <UIcon v-else name="i-heroicons-photo" class="size-4 text-dimmed" />
             </template>
 
             <template v-if="selectedLogoItem">{{
@@ -173,10 +181,12 @@ const {
             }}</template>
 
             <template #item-leading="{ item }">
-              <img
+              <NuxtImg
                 :src="item.avatar?.src"
                 :alt="item.label"
-                class="size-4 dark:invert"
+                width="16"
+                height="16"
+                class="dark:invert"
               />
             </template>
           </USelectMenu>