adds new trail page

web/src/lib/components/category_card.svelte

@@ -1,13 +1,24 @@
 <script lang="ts">
     import type { Category } from "$lib/models/category";
+    import { getFileURL } from "$lib/util/file_util";
 
     export let category: Category;
 </script>
 
-<div class="category-card relative rounded-2xl shadow-md w-48 h-48 overflow-hidden cursor-pointer">
-    <img class="w-full h-full" src={category.img} alt="" />
-    <div class="absolute bottom-0 w-full h-1/2 bg-gradient-to-b from-transparent to-black opacity-50"></div>
-    <h5 class="absolute text-white font-bold bottom-4 left-4 text-xl">{category.name}</h5>
+<div
+    class="category-card relative rounded-2xl shadow-md w-48 h-48 overflow-hidden cursor-pointer"
+>
+    <img
+        class="w-full h-full"
+        src={getFileURL(category, category.img)}
+        alt=""
+    />
+    <div
+        class="absolute bottom-0 w-full h-1/2 bg-gradient-to-b from-transparent to-black opacity-50"
+    ></div>
+    <h5 class="absolute text-white font-bold bottom-4 left-4 text-xl">
+        {category.name}
+    </h5>
 </div>
 
 <style>