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

app/components/Contact/TopScreen/LeftBar.vue

@@ -1,33 +1,27 @@
 <script setup lang="ts">
+import BACKGROUND_IMAGE from "/assets/images/contact/top-screen/left-bar.png";
+import THINGS_IMAGE from "/assets/images/contact/top-screen/left-bar-things.png";
+
 const store = useContactStore();
 
-const backgroundImage = useTemplateRef("backgroundImage");
-const thingsImage = useTemplateRef("thingsImage");
+const [backgroundImage, thingsImage] = useImages(
+  BACKGROUND_IMAGE,
+  THINGS_IMAGE,
+);
 
 useRender((ctx) => {
-  if (!backgroundImage.value || !thingsImage.value) return;
-
   ctx.globalAlpha = store.isIntro
     ? store.intro.stage1Opacity
     : store.outro.stage2Opacity;
-  ctx.drawImage(backgroundImage.value, 0, 0);
+  ctx.drawImage(backgroundImage!, 0, 0);
 
   ctx.globalAlpha = store.isIntro
     ? store.intro.stage3Opacity
     : store.outro.stage1Opacity;
-  ctx.drawImage(thingsImage.value, 0, 0);
+  ctx.drawImage(thingsImage!, 0, 0);
+});
+
+defineOptions({
+  render: () => null,
 });
 </script>
-
-<template>
-  <img
-    ref="backgroundImage"
-    src="/assets/images/contact/top-screen/left-bar.png"
-    hidden
-  />
-  <img
-    ref="thingsImage"
-    src="/assets/images/contact/top-screen/left-bar-things.png"
-    hidden
-  />
-</template>