reverse proxy for uploads

src/routes/blog/+page.server.ts

@@ -1,5 +1,5 @@
-import { error } from "@sveltejs/kit";
-import type { PageServerLoad } from "./$types";
+import { error } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async ({ locals }) => {
 	const { strapi } = locals;
@@ -12,20 +12,20 @@ export const load: PageServerLoad = async ({ locals }) => {
 				id: post.documentId,
 				image: {
 					url: post.Header.formats.medium.url,
-					alt: post.Header.alternativeText,
+					alt: post.Header.alternativeText
 				},
 				title: post.Title,
 				body: post.Body,
 				topics: post.Topics.map((topic: { id: string; Topic: string }) => ({
 					id: topic.id,
-					name: topic.Topic,
+					name: topic.Topic
 				})),
-				published: post.publishedAt,
+				published: post.publishedAt
 			})),
-			meta,
+			meta
 		};
 	} catch (err) {
-		console.log("Uh-oh!");
+		console.log('Uh-oh!');
 		error(500, err.message);
 	}
 };

src/routes/blog/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { env } from '$env/dynamic/public';
 	import BlogCard from '$lib/components/BlogCard.svelte';
 	import type { PageProps } from './$types';
 
@@ -16,7 +15,7 @@
 	{#each posts as post (post.id)}
 		<BlogCard
 			id={post.id}
-			img={`${env.PUBLIC_STRAPI_HOST}${post.image.url}`}
+			img={post.image.url}
 			img-alt={post.image.alt}
 			title={post.title}
 			published={post.published}

src/routes/blog/[slug]/+page.server.ts

@@ -1,4 +1,4 @@
-import type { PageServerLoad } from "./$types";
+import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async ({ locals, params }) => {
 	const { slug } = params;
@@ -12,16 +12,16 @@ export const load: PageServerLoad = async ({ locals, params }) => {
 			image: {
 				url: post.Header.url,
 				alt: post.Header.alternativeText,
-				caption: post.Header.caption,
+				caption: post.Header.caption
 			},
 			title: post.Title,
 			body: post.Body,
 			topics: post.Topics.map((topic: { id: string; Topic: string }) => ({
 				id: topic.id,
-				name: topic.Topic,
+				name: topic.Topic
 			})),
-			published: post.publishedAt,
+			published: post.publishedAt
 		},
-		meta,
+		meta
 	};
 };

src/routes/blog/[slug]/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { env } from '$env/dynamic/public';
 	import dayjs from 'dayjs';
 	import { compile } from 'mdsvex';
 	import type { PageProps } from './$types';
@@ -14,11 +13,7 @@
 		<p class="text-gray-500">{dayjs(post.published).format('DD MMMM YYYY')}</p>
 		<h1 class="text-4xl font-light">{post.title}</h1>
 	</div>
-	<img
-		class="aspect-4/2 w-full object-cover"
-		src={`${env.PUBLIC_STRAPI_HOST}${post.image.url}`}
-		alt={post.image.alt}
-	/>
+	<img class="aspect-4/2 w-full object-cover" src={post.image.url} alt={post.image.alt} />
 	<div class="w-full max-w-5xl px-4">
 		{#await compile(post.body)}
 			<div class="skeleton h-48 w-full"></div>

src/routes/uploads/[slug]/+server.ts

@@ -0,0 +1,8 @@
+import type { RequestHandler } from './$types';
+
+export const GET: RequestHandler = async ({ locals, params }) => {
+	const { slug } = params;
+
+	const response = await fetch(`${locals.strapi.uploads}/${slug}`);
+	return response;
+};