refactor: get random image from api

app.vue

@@ -9,11 +9,17 @@
     >
       ✨ Lilou ✨
     </h1>
-    <RandomImage />
+    <img
+      class="w-full max-w-[50vh]"
+      src="http://localhost:3000/api"
+      alt="Lilou"
+    />
     <h1
       class="text-4xl md:text-5xl lg:text-6xl font-serif text-white dark:text-white"
     >
       ✨ Lilou ✨
     </h1>
+
+    <Glitters />
   </main>
 </template>

components/RandomImage.vue

@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import { resolve } from "path";
-import { readdir } from "fs/promises";
-
-const images = await readdir(resolve("public", "lilou"));
-const image = images[Math.floor(Math.random() * images.length)];
-const imagePath = `/lilou/${image}`;
-</script>
-
-<template>
-  <img class="w-full max-w-[50vh]" :src="imagePath" alt="Lilou" >
-</template>

server/api/index.ts

@@ -0,0 +1,10 @@
+import { resolve } from "path";
+import { readdir, readFile } from "fs/promises";
+
+export default defineEventHandler(async () => {
+  const images = await readdir(resolve("public", "lilou"));
+  const imageName = images[Math.floor(Math.random() * images.length)];
+  const image = await readFile(resolve("public", "lilou", imageName));
+
+  return image;
+});