feat: use useImages composable instead of <img> + useTemplateRef

app/components/Contact/TopScreen/Notifications.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
+import NOTIFICATION_IMAGE from "/assets/images/contact/bottom-screen/notification.png";
+import TITLE_IMAGE from "/assets/images/contact/top-screen/title.png";
+
 // text color:
 const store = useContactStore();
 
-const notificationImage = useTemplateRef("notificationImage");
-const titleImage = useTemplateRef("titleImage");
+const [notificationImage, titleImage] = useImages(
+  NOTIFICATION_IMAGE,
+  TITLE_IMAGE,
+);
 
 useRender((ctx) => {
-  if (!notificationImage.value || !titleImage.value) return;
-
   ctx.globalAlpha = store.outro.stage2Opacity;
   ctx.font = "10px NDS10";
 
@@ -17,7 +20,7 @@ useRender((ctx) => {
     const y = 169 - 24 * index + store.notificationsYOffset;
     if (y < -24) break;
 
-    ctx.drawImage(notificationImage.value, 21, y);
+    ctx.drawImage(notificationImage!, 21, y);
 
     const content = store.notifications[i]!;
     ctx.fillStyle = content.includes("opened") ? "#00fbba" : "#e3f300";
@@ -29,7 +32,7 @@ useRender((ctx) => {
     ? store.intro.stage1Opacity
     : store.outro.stage2Opacity;
   ctx.drawImage(
-    titleImage.value,
+    titleImage!,
     21,
     store.isIntro
       ? store.intro.titleY
@@ -70,17 +73,8 @@ useRender((ctx) => {
     }
   }
 });
-</script>
 
-<template>
-  <img
-    ref="notificationImage"
-    src="/assets/images/contact/bottom-screen/notification.png"
-    hidden
-  />
-  <img
-    ref="titleImage"
-    src="/assets/images/contact/top-screen/title.png"
-    hidden
-  />
-</template>
+defineOptions({
+  render: () => null,
+});
+</script>