make image urls more reliable on github pages

broadinstitute · Oct 3, 2024 · e356575 · e356575
1 parent 7f342ce
commit e356575
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git a/website/src/components/HomepageFeatures/featureGallery.js b/website/src/components/HomepageFeatures/featureGallery.js
@@ -1,17 +1,22 @@
 import React from 'react';
 import styles from './styles.module.css';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
 function FeatureGallery({ header, images, description }) {
   return (
     <div className={styles.featureGallery}>
       <h2 className={styles.header}>{header}</h2>
 
       <div className={styles.imageGallery}>
-        {images.map((image, index) => (
-          <a key={index} href={image.link} target="_blank" rel="noopener noreferrer">
-            <img className={styles.galleryImage} src={image.src} alt={image.alt || `Image ${index + 1}`} />
-          </a>
-        ))}
+        {images.map((image, index) => {
+          const resolvedImageUrl = useBaseUrl(image.src);
+
+          return (
+            <a key={index} href={image.link} target="_blank" rel="noopener noreferrer">
+              <img className={styles.galleryImage} src={resolvedImageUrl} alt={image.alt || `Image ${index + 1}`} />
+            </a>
+          );
+        })}
       </div>
 
       {description && <p className={styles.description}>{description}</p>}

diff --git a/website/src/components/HomepageFeatures/wholeRowFeature.js b/website/src/components/HomepageFeatures/wholeRowFeature.js
@@ -5,15 +5,15 @@ import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 
 function WholeRowFeature({ imageUrl, title, description, buttons, contentAlignment, imageAlignment }) {
-  const imgUrl = useBaseUrl(imageUrl);
+  const resolvedImageUrl = useBaseUrl(imageUrl);
 
   return (
     <div className={clsx('col col--6', styles.featureContainer, imageAlignment === 'right' ? styles.alignRight : styles.alignLeft)}>
-      {imgUrl && (
+      {resolvedImageUrl && (
         <div className={styles.featureImage}>
           <img
             className={styles.largeFeatureImage}
-            src={imgUrl}
+            src={resolvedImageUrl}
             alt={title || ''}
           />
         </div>