add base to url for images

sethpjohnson · Dec 11, 2024 · 41001f6 · 41001f6
1 parent ae8b1f1
commit 41001f6
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 38 deletions.
diff --git a/src/lib/components/Education.svelte b/src/lib/components/Education.svelte
@@ -1,5 +1,6 @@
 <script>
   import { education } from "$lib/data/education";
+  import { base } from "$app/paths";
 </script>
 
 <section class="py-16 bg-gray-50" id="education">
@@ -9,7 +10,7 @@
       {#each education as item}
         <div class="flex flex-row gap-4 items-center">
           <div class="flex-shrink-0">
-            <img src={item.image} alt={item.title} class="w-16 h-16 flex-shrink-0" />
+            <img src={`${base}${item.image}`} alt={item.title} class="w-16 h-16 flex-shrink-0" />
           </div>
           <div>
             <p>

diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { Github, Linkedin, Mail, Mic, Hash } from "lucide-svelte";
+    import { base } from "$app/paths";
 </script>
 
 <header class="relative overflow-hidden">
@@ -12,8 +13,8 @@
                 class="w-48 h-48 rounded-full overflow-hidden bg-white/20 flex-shrink-0 ring-4 ring-white/30 shadow-lg shadow-black/50"
             >
                 <img
-                    src="/images/seth-1.jpg"
-                    alt="Profile placeholder"
+                    src="{base}/images/seth-1.jpg"
+                    alt="Seth Johnson"
                     class="w-full h-full object-cover"
                 />
             </div>

diff --git a/src/lib/components/Projects.svelte b/src/lib/components/Projects.svelte
diff --git a/src/lib/components/SideProjects.svelte b/src/lib/components/SideProjects.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { sideProjects } from '$lib/data/sideProjects';
+  import { base } from "$app/paths";
 </script>
 
 <section class="py-16 bg-white" id="side-projects">
@@ -15,7 +16,7 @@
           style={project.link ? 'cursor: pointer' : ''}
         >
           <img
-            src={project.image}
+            src={`${base}${project.image}`}
             alt={project.title}
             class="w-full h-full object-cover transition-all duration-500 group-hover:scale-110 group-hover:rotate-2"
           />

diff --git a/src/lib/components/WorkProjects.svelte b/src/lib/components/WorkProjects.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { workProjects } from '$lib/data/workProjects';
+  import { base } from "$app/paths";
 </script>
 
 <section class="py-16 bg-gray-50" id="work-projects">
@@ -9,7 +10,7 @@
       {#each workProjects as project}
         <div class="group relative w-full aspect-square rounded-xl overflow-hidden shadow-lg max-w-[280px] sm:max-w-none mx-auto">
           <img
-            src={project.image}
+            src={`${base}${project.image}`}
             alt={project.title}
             class="w-full h-full object-cover transition-all duration-500 group-hover:scale-110 group-hover:rotate-2"
           />