add api route to return image

entrypoint.sh

@@ -1,8 +1,6 @@
 #!/bin/bash
 npx prisma generate &&
 npm run build &&
-# mkdir -p ./static/data && ln -s /data/uploads ./static/data/uploads
-ln -s /data/uploads ./build/client/uploads &&
 npx prisma generate &&
 npx prisma migrate deploy &&
 npx prisma db push &&

src/lib/components/community/Card.svelte

@@ -45,7 +45,7 @@
   on:click={handleClick}
 >
   <div class="w-full h-full absolute top-0 left-0 -z-[1] rounded-xl overflow-hidden" class:!brightness-50={loading}>
-    <div class="w-full h-full bg-center bg-cover transition-all duration-200 group-hover:scale-110 " style="background-image: url('{env.PUBLIC_FILE_UPLOAD_DIR}/{card.image}');"></div>
+    <img class="w-full h-full bg-center bg-cover transition-all duration-200 group-hover:scale-110" src="/api/images/{card.image}" alt="{card.prompt}" />
   </div>
   <div class="group-hover:opacity-100 opacity-0 translate-y-full group-hover:translate-y-0 transition-all duration-200 flex flex-col gap-4 w-full">
     <div class="bg-black/40 backdrop-blur-sm border border-white/30 rounded-lg px-6 py-3 text-white transition-all duration-200 w-full">

src/lib/components/community/viewer/Viewer.svelte

@@ -69,7 +69,7 @@
       use:clickoutside on:clickoutside={handleClose}
     >
       {#if gallery?.id}
-        <img src={env.PUBLIC_FILE_UPLOAD_DIR}/{gallery?.image} alt={gallery?.prompt} class="w-full object-cover h-[200px] lg:h-auto" />
+        <img src="/api/images/{gallery?.image}" alt={gallery?.prompt} class="w-full object-cover h-[200px] lg:h-auto" />
         <div class="flex flex-col justify-between w-full overflow-auto flex-1">
           <div class="w-full p-6">
             <header class="w-full flex items-start justify-between px-2 pt-2">

src/routes/api/images/[id]/+server.ts

@@ -0,0 +1,34 @@
+import { json, type RequestEvent } from '@sveltejs/kit';
+import { promises } from 'fs';
+import { env } from '$env/dynamic/public';
+
+import prisma from '$lib/prisma';
+
+/** @type {import('./$types').RequestHandler} */
+
+export async function GET({ params } : RequestEvent) {
+  const id = params.id;
+  const gallery = await prisma.gallery.findFirst({
+    where: {
+      image: id,
+    },
+    select: {
+      image: true,
+    }
+  })
+
+  if (!gallery) {
+    return json({
+      error: {
+        token: "Gallery not found"
+      }
+    }, { status: 404 })
+  }
+
+  const file = await promises.readFile(`${env.PUBLIC_FILE_UPLOAD_DIR}/${gallery.image}`)
+  return new Response(file, {
+    headers: {
+      'Content-Type': 'image/png',
+    },
+  })
+}

vite.config.ts

@@ -7,10 +7,10 @@ export default defineConfig({
 		enhancedImages(),
 		sveltekit(),
 	],
-	server: {
-		fs: {
-			strict: false,
-			allow: [".."],
-		},
-	}
+	// server: {
+	// 	fs: {
+	// 		strict: false,
+	// 		allow: [".."],
+	// 	},
+	// }
 });