include images in bundle

Author: willbreitkreutz

lib/composite/footer/logo-banner.jsx

@@ -1,21 +1,21 @@
 const base = import.meta.env.BASE_URL;
+import armyLogo from "../../img/armystar-logo-rb.svg";
+import usaceLogo from "../../img/usace-logo-color.svg";
+import rsgisLogo from "../../img/rsgis-logo.png";
+import cwbiLogo from "../../img/cwbi-logo.png";
 
 function LogoBanner({ army, usace, rsgis, cwbi }) {
   return (
     <div className="flex flex-row justify-center align-middle gap-6 mb-4">
       {army && (
         <a href="https://www.army.mil" target="_blank" rel="noopener">
-          <img
-            src={`${base}armystar-logo-rb.svg`}
-            alt="U.S. Army"
-            className="max-h-[75px]"
-          />
+          <img src={armyLogo} alt="U.S. Army" className="max-h-[75px]" />
         </a>
       )}
       {usace && (
         <a href="https://www.usace.army.mil" target="_blank" rel="noopener">
           <img
-            src={`${base}usace-logo-color.svg`}
+            src={usaceLogo}
             alt="U.S. Army Corps of Engineers"
             className="max-h-[75px] h-[75px] w-auto"
           />
@@ -28,7 +28,7 @@ function LogoBanner({ army, usace, rsgis, cwbi }) {
           rel="noopener"
         >
           <img
-            src={`${base}rsgis-logo.png`}
+            src={rsgisLogo}
             alt="Remote Sensing - GIS Center of Expertise"
             className="max-h-[75px]"
           />
@@ -41,7 +41,7 @@ function LogoBanner({ army, usace, rsgis, cwbi }) {
           rel="noopener"
         >
           <img
-            src={`${base}cwbi-logo.png`}
+            src={cwbiLogo}
             alt="Civil Works Business Intelligence"
             className="max-h-[75px]"
           />

lib/composite/header/index.jsx

@@ -1,6 +1,6 @@
 import { NavbarLinks } from "./navbar-links";
-
-const base = import.meta.env.BASE_URL;
+import usaceLogo from "../../img/usace-logo-color.svg";
+import magnifyingGlass from "../../img/Magnifying_glass_icon.svg";
 
 function classNames(...classes) {
   return classes.filter(Boolean).join(" ");
@@ -33,7 +33,7 @@ function Logo() {
   return (
     <div className="absolute left-[15px] bottom-[-15px] w-[82px] z-10">
       <a href="/">
-        <img className="h-[50px] w-auto" src={`${base}usace-logo-color.svg`} />
+        <img className="h-[50px] w-auto" src={usaceLogo} />
       </a>
       <div className="absolute left-[65px] bottom-[-9px] text-sm text-black">
         ®
@@ -47,7 +47,7 @@ function Search() {
     <input
       style={{
         order: 2,
-        backgroundImage: `url("${base}Magnifying_glass_icon.svg")`,
+        backgroundImage: `url("${magnifyingGlass}")`,
         backgroundSize: "13px",
         backgroundRepeat: "no-repeat",
         backgroundPosition: "10px center",