hotfix: update image import syntax for vite asset handling (#305)

* update image import syntax for vite asset handling

Replace direct src path with image import to ensure asset
asset bundling in production builds

* Fix prettier issue

react/src/components/HeaderNavBar/HeaderNavBar.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import useAuthenticatedUser from '@hazmapper/hooks/user/useAuthenticatedUser';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { Button, InlineMessage, LoadingSpinner } from '@tacc/core-components';
+import hazmapperHeaderLogo from '@hazmapper/assets/hazmapper-header-logo.png';
 import styles from './HeaderNavBar.module.css';
 import * as ROUTES from '@hazmapper/constants/routes';
 
@@ -44,11 +45,7 @@ export const HeaderNavBar: React.FC = () => {
       aria-label="return to project listings"
       tabIndex={0}
     >
-      <img
-        width="150px"
-        src="./src/assets/hazmapper-header-logo.png"
-        alt="Hazmapper Logo"
-      />
+      <img width="150px" src={hazmapperHeaderLogo} alt="Hazmapper Logo" />
       {userData?.username ? (
         <div className={styles.userName}>{userData.username}</div>
       ) : (

react/src/pages/MainMenu/MainMenu.tsx

@@ -3,17 +3,18 @@ import ProjectListing from '@hazmapper/components/Projects/ProjectListing';
 import styles from './layout.module.css';
 import { Button } from '@tacc/core-components';
 import HeaderNavBar from '@hazmapper/components/HeaderNavBar';
+import hazmapperLogo from '@hazmapper/assets/[email protected]';
+import nsfLogo from '@hazmapper/assets/nsf.png';
+import designsafeLogo from '@hazmapper/assets/designsafe.svg';
+import nheriLogo from '@hazmapper/assets/nheri.png';
 
 const MainMenu = () => {
   return (
     <div className={styles.root}>
       <HeaderNavBar />
       <div className={styles.listingContainer}>
         <div className={styles.versionContainer}>
-          <img
-            src="./src/assets/[email protected]"
-            alt="Hazmapper Logo"
-          ></img>
+          <img src={hazmapperLogo} alt="Hazmapper Logo"></img>
           <div className={styles.version}>{'Version 2.19'}</div>
         </div>
         <ProjectListing />
@@ -53,20 +54,20 @@ const MainMenu = () => {
       <div className={styles.sponsorContainer}>
         <a href="https://www.nsf.gov/">
           <img
-            src="./src/assets/nsf.png"
+            src={nsfLogo}
             alt="National Science Foundation website"
             width="60px"
           />
         </a>
         <a href="https://www.designsafe-ci.org/">
           <img
-            src="./src/assets/designsafe.svg"
+            src={designsafeLogo}
             alt="NHERI DesignSafe website"
             width="200px"
           />
         </a>
         <a href="https://www.designsafe-ci.org/about/">
-          <img src="./src/assets/nheri.png" alt="NHERI website" width="150px" />
+          <img src={nheriLogo} alt="NHERI website" width="150px" />
         </a>
       </div>
     </div>