Custom function for getting relative url for files

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">

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
 }
 

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;