fix: broken images on project and ecosystem cards

JaneliaSciComp · May 28, 2024 · 64311a5 · 64311a5
1 parent cabb347
commit 64311a5
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 4 deletions.
diff --git a/public/project-images/Bg0Geue-cY8-unsplash.jpg b/public/project-images/Bg0Geue-cY8-unsplash.jpg
diff --git a/public/project-images/OqtafYT5kTw-unsplash.jpg b/public/project-images/OqtafYT5kTw-unsplash.jpg
diff --git a/public/project-images/f4pUuCc3M0g-unsplash.jpg b/public/project-images/f4pUuCc3M0g-unsplash.jpg
diff --git a/src/components/projects/CardImage.jsx b/src/components/projects/CardImage.jsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import { getRandomImage } from "../../utils/getRandomImage";
 
-export default function ContentCardImage() {
+export default function ContentCardImage({ baseUrl }) {
   const placeholderProjectImages = [
     "Bg0Geue-cY8",
     "f4pUuCc3M0g",
@@ -15,7 +15,7 @@ export default function ContentCardImage() {
 
   return (
     <img
-      src={`https://source.unsplash.com/${randomImage}`}
+      src={`${baseUrl}/project-images/${randomImage}-unsplash.jpg`}
       className="w-full h-40 object-cover object-center"
       loading="lazy"
     />

diff --git a/src/pages/ecosystems/index.astro b/src/pages/ecosystems/index.astro
@@ -95,7 +95,11 @@ const uniqueTags = extractUniqueTagsObject(flattenedRelatedProjects);
                     slot="cardImage"
                   />
                 ) : (
-                  <CardImage slot="cardImage" client:visible />
+                  <CardImage
+                    slot="cardImage"
+                    baseUrl={baseUrl}
+                    client:only="react"
+                  />
                 )}
 
                 <CardContent

diff --git a/src/pages/projects/index.astro b/src/pages/projects/index.astro
@@ -95,7 +95,11 @@ const uniqueTags = extractUniqueTagsObject(allProjects);
                     slot="cardImage"
                   />
                 ) : (
-                  <CardImage slot="cardImage" client:load />
+                  <CardImage
+                    slot="cardImage"
+                    baseUrl={baseUrl}
+                    client:only="react"
+                  />
                 )}
 
                 <CardContent