Merge pull request #5579 from entur/debug-client-bundle-image-assets

Include images into vite build process so urls are transformed correctly

client-next/src/components/ItineraryList/ItineraryHeaderLegContent.tsx

@@ -1,5 +1,10 @@
 import { Leg } from '../../gql/graphql.ts';
 import { useHeaderLegContentStyleCalculations } from './useHeaderLegContentStyleCalculations.ts';
+const modeIcons = import.meta.glob('../../static/img/mode/*.png', { as: 'url', eager: true });
+
+function getModeIconUrl(leg: Leg) {
+  return modeIcons[`../../static/img/mode/${leg.mode.toLowerCase()}.png`];
+}
 
 export function ItineraryHeaderLegContent({
   leg,
@@ -22,6 +27,8 @@ export function ItineraryHeaderLegContent({
     pxSpan,
   );
 
+  const legIconImageUrl = getModeIconUrl(leg);
+
   return (
     <div
       className="itinerary-header-leg-wrapper"
@@ -36,8 +43,8 @@ export function ItineraryHeaderLegContent({
         className="itinerary-header-leg-icon"
         style={{
           background: legTextColor,
-          maskImage: `url(/debug-client-preview/img/mode/${leg.mode.toLowerCase()}.png)`,
-          WebkitMaskImage: `url(/debug-client-preview/img/mode/${leg.mode.toLowerCase()}.png)`,
+          maskImage: `url(${legIconImageUrl})`,
+          WebkitMaskImage: `url(${legIconImageUrl})`,
         }}
       ></div>
       {showPublicCode && <span className="itinerary-header-leg-public-code">{leg.line?.publicCode}</span>}

client-next/src/components/MapView/NavigationMarkers.tsx

@@ -1,5 +1,7 @@
 import { TripQueryVariables } from '../../gql/graphql.ts';
 import { Marker } from 'react-map-gl';
+import markerFlagStart from '../../static/img/marker-flag-start-shadowed.png';
+import markerFlagEnd from '../../static/img/marker-flag-end-shadowed.png';
 
 export function NavigationMarkers({
   tripQueryVariables,
@@ -27,7 +29,7 @@ export function NavigationMarkers({
           }}
           anchor="bottom-right"
         >
-          <img alt="" src="/debug-client-preview/img/marker-flag-start-shadowed.png" height={48} width={49} />
+          <img alt="" src={markerFlagStart} height={48} width={49} />
         </Marker>
       )}
       {tripQueryVariables.to.coordinates && (
@@ -45,7 +47,7 @@ export function NavigationMarkers({
           }}
           anchor="bottom-right"
         >
-          <img alt="" src="/debug-client-preview/img/marker-flag-end-shadowed.png" height={48} width={49} />
+          <img alt="" src={markerFlagEnd} height={48} width={49} />
         </Marker>
       )}
     </>

client-next/src/components/SearchBar/SearchBar.tsx

@@ -14,6 +14,7 @@ import { ItineraryFilterDebugSelect } from './ItineraryFilterDebugSelect.tsx';
 import Navbar from 'react-bootstrap/Navbar';
 import { ServerInfoTooltip } from './ServerInfoTooltip.tsx';
 import { useRef, useState } from 'react';
+import logo from '../../static/img/otp-logo.svg';
 
 type SearchBarProps = {
   onRoute: () => void;
@@ -31,14 +32,7 @@ export function SearchBar({ onRoute, tripQueryVariables, setTripQueryVariables,
     <div className="search-bar top-content">
       <Navbar.Brand onClick={() => setShowServerInfo((v) => !v)}>
         <div style={{ position: 'relative' }} ref={target}>
-          <img
-            alt=""
-            src="/debug-client-preview/img/otp-logo.svg"
-            width="30"
-            height="30"
-            className="d-inline-block align-top"
-          />{' '}
-          OTP Debug Client
+          <img alt="" src={logo} width="30" height="30" className="d-inline-block align-top" /> OTP Debug Client
           {showServerInfo && <ServerInfoTooltip serverInfo={serverInfo} target={target} />}
         </div>
       </Navbar.Brand>