diff --git a/src/components/Card/OverviewCard.astro b/src/components/Card/OverviewCard.astro
index 23618ee..8a73c9e 100644
--- a/src/components/Card/OverviewCard.astro
+++ b/src/components/Card/OverviewCard.astro
@@ -5,7 +5,7 @@ import TagRow from "./TagRow.astro"
 const { recipe } = Astro.props;
 
 const headerImage = await client.collection("images").getOne(recipe.images[0])
-const image = await client.files.getURL(headerImage, headerImage.image)
+const image = await client.files.getRelativeURL(headerImage, headerImage.image)
 ---
 
 <div class="relative z-0 flex h-50">
diff --git a/src/components/Detail/ImageCarousel.astro b/src/components/Detail/ImageCarousel.astro
index ece401e..bbdc8c6 100644
--- a/src/components/Detail/ImageCarousel.astro
+++ b/src/components/Detail/ImageCarousel.astro
@@ -4,7 +4,7 @@ const { class: className, recipe } = Astro.props
 
 async function getLink(img: string) {
     const record = await client.collection("images").getOne(img)
-    const link = await client.files.getURL(record, record.image)
+    const link = await client.files.getRelativeURL(record, record.image)
     return link
 }
 
diff --git a/src/data/pocketbase.ts b/src/data/pocketbase.ts
index 0b05826..bc56688 100644
--- a/src/data/pocketbase.ts
+++ b/src/data/pocketbase.ts
@@ -1,5 +1,12 @@
 import Pocketbase from "pocketbase"
 
-const client = new Pocketbase(import.meta.env.PUBLIC_URL)
+const client = new Pocketbase("http://localhost:4321")
 client.autoCancellation(false)
+
+// Return a relative url for file instead of full path including localhost, which breaks external access
+client.files.getRelativeURL = (record: { [key: string]: any; }, filename: string, queryParams?: FileOptions | undefined) => {
+    const res = client.files.getURL(record, filename)
+    return res.substring(21)
+}
+
 export default client;
\ No newline at end of file