fix: image not found

src/asset/styles/_custom_style.scss

@@ -1,6 +1,6 @@
 body
 {
-  background-image: url('./cover.png');
+  background-image: url('cover.png');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
@@ -131,11 +131,11 @@ input
 
 .delete-icon
 {
-  content: url('./icon/del.svg');
+  content: url('icon/del.svg');
 
   &:hover
   {
-    content: url('./icon/del_hover.svg');
+    content: url('icon/del_hover.svg');
   }
 }
 ::-webkit-scrollbar

src/components/DataList/RouteList.jsx

@@ -1,8 +1,10 @@
 import { Link } from "react-router-dom";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
 
-export default function RouteList({ data = [], favorites = [] }) {
+import LikeFillSvg from "../../asset/icon/like_fill.svg";
+import LikeSvg from "../../asset/icon/like.svg";
 
+export default function RouteList({ data = [], favorites = [] }) {
   data.forEach((item) => {
     item.favorite = false;
   });
@@ -15,69 +17,62 @@ export default function RouteList({ data = [], favorites = [] }) {
 
   return (
     <>
-      {
-        data.map((item) => (
-          <li
-            key={item.RouteUID}
-            className="d-flex justify-content-between align-items-center"
+      {data.map((item) => (
+        <li
+          key={item.RouteUID}
+          className="d-flex justify-content-between align-items-center"
+          data-start={item.DepartureStopNameZh}
+          data-end={item.DestinationStopNameZh}
+        >
+          <Link
+            to={"/citybus/" + item.RouteName.Zh_tw}
+            className="d-block px-4 py-3"
             data-start={item.DepartureStopNameZh}
             data-end={item.DestinationStopNameZh}
           >
-            <Link
-              to={"/citybus/" + item.RouteName.Zh_tw}
-              className="d-block px-4 py-3"
+            <h3 className="fs-1 lh-base text-one-line">
+              {item.RouteName.Zh_tw}
+            </h3>
+            <h4
+              className="fs-3 text-light lh-base text-one-line"
               data-start={item.DepartureStopNameZh}
               data-end={item.DestinationStopNameZh}
             >
-              <h3 className="fs-1 lh-base text-one-line">
-                {item.RouteName.Zh_tw}
-              </h3>
-              <h4
-                className="fs-3 text-light lh-base text-one-line"
-                data-start={item.DepartureStopNameZh}
-                data-end={item.DestinationStopNameZh}
-              >
-                {item.DepartureStopNameZh}
-                <span className="text-primary mx-1">往</span>
-                {item.DestinationStopNameZh}
-              </h4>
-            </Link>
-            <button
-              type="button"
-              className="btn-favorite p-0"
-              data-favorite={
-                item.RouteUID +
-                "&" +
-                item.RouteName.Zh_tw +
-                "&" +
-                item.DepartureStopNameZh +
-                "&" +
-                item.DestinationStopNameZh
-              }
-            >
-              {item.favorite ? (
-                <img
-                  src="/icon/like_fill.svg"
-                  // src="/icon/like_fill.svg"
-                  className="active d-block py-6 px-5"
-                  alt="like_off"
-                />
-              ) : (
-                <img
-                  src="/icon/like.svg"
-                  className="d-block py-6 px-5"
-                  alt="like_off"
-                />
-              )}
-            </button>
-          </li>
-        ))
-      }
+              {item.DepartureStopNameZh}
+              <span className="text-primary mx-1">往</span>
+              {item.DestinationStopNameZh}
+            </h4>
+          </Link>
+          <button
+            type="button"
+            className="btn-favorite p-0"
+            data-favorite={
+              item.RouteUID +
+              "&" +
+              item.RouteName.Zh_tw +
+              "&" +
+              item.DepartureStopNameZh +
+              "&" +
+              item.DestinationStopNameZh
+            }
+          >
+            {item.favorite ? (
+              <img
+                src={LikeFillSvg}
+                className="active d-block py-6 px-5"
+                alt="like_off"
+              />
+            ) : (
+              <img src={LikeSvg} className="d-block py-6 px-5" alt="like_off" />
+            )}
+          </button>
+        </li>
+      ))}
     </>
-  )
+  );
 }
 
 RouteList.propTypes = {
   data: PropTypes.array,
   favorites: PropTypes.array,
-}
+};

src/components/Header/index.jsx

@@ -1,64 +1,66 @@
 import { useState, useEffect } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import PubSub from "pubsub-js";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
 import { Container } from "react-bootstrap";
 
+import GoBackSvg from "../../asset/icon/goBack.svg?react";
 import Logo from "../../asset/icon/logo.svg?react";
+import MapSvg from "../../asset/icon/map.svg?react";
+import LikeBtnSvg from "../../asset/icon/like_btn.svg?react";
 import "./header.scss";
 
 export default function Header({ setKeyword, setShowMap, showMap }) {
-
   /* 搜索框 focus，虛擬鍵盤隱藏 */
   const handleFocus = () => {
     PubSub.publish("focus", true);
-  }
+  };
+
+  const [search, setSearch] = useState("");
 
-  const [search, setSearch] = useState('');
-
   useEffect(() => {
     const token = PubSub.subscribe("search", (_, state) => {
       switch (state) {
         case "倒退":
-          setSearch(prevState => prevState.slice(0, -1))
+          setSearch((prevState) => prevState.slice(0, -1));
           break;
         case "C":
-          setSearch('')
+          setSearch("");
           break;
         default:
-          setSearch(prevState => prevState + state)
+          setSearch((prevState) => prevState + state);
       }
-    })
+    });
     return () => {
       PubSub.unsubscribe(token);
-    }
-  }, [])
+    };
+  }, []);
 
   useEffect(() => {
-    setKeyword(search)
-  }, [setKeyword, search])
+    setKeyword(search);
+  }, [setKeyword, search]);
 
   const handleSearch = (e) => {
     setSearch(e.target.value);
-  }
+  };
 
   const navigate = useNavigate();
 
   const goBack = () => {
     navigate(-1);
-  }
+  };
 
   const toggleMap = () => {
-    setShowMap(!showMap)
-  }
+    setShowMap(!showMap);
+  };
 
   return (
     <header className="fixed-top">
       <Container className="d-flex align-items-end py-3">
         <div className="d-flex justify-content-end align-items-center header">
           <div className="result_show">
             <button type="button" onClick={goBack} aria-label="上一頁 Go back">
-              <img src="/icon/goBack.svg" alt="上一頁 Go back" />
+              <GoBackSvg />
             </button>
           </div>
           <div className="logo d-flex justify-content-center">
@@ -93,8 +95,10 @@ export default function Header({ setKeyword, setShowMap, showMap }) {
               className="flex-shrink-0 position-relative map"
               aria-label="地圖 Map"
             >
-              <img src="/icon/map.svg" alt="地圖 Map" />
-              <span className={`crossIcon ${showMap ? "showCross" : ""}`}></span>
+              <MapSvg />
+              <span
+                className={`crossIcon ${showMap ? "showCross" : ""}`}
+              ></span>
             </button>
           </div>
           <div className="page_show like">
@@ -103,7 +107,7 @@ export default function Header({ setKeyword, setShowMap, showMap }) {
               className="flex-shrink-0 ms-2 d-block"
               aria-label="我的收藏 Favorites"
             >
-              <img src="/icon/like_btn.svg" alt="我的收藏 Favorites" />
+              <LikeBtnSvg />
             </Link>
           </div>
         </div>
@@ -112,9 +116,8 @@ export default function Header({ setKeyword, setShowMap, showMap }) {
   );
 }
 
-
 Header.propTypes = {
   setKeyword: PropTypes.func.isRequired,
   setShowMap: PropTypes.func.isRequired,
-  showMap: PropTypes.bool.isRequired
-}
+  showMap: PropTypes.bool.isRequired,
+};

src/components/Keyboard/KeyboardBase.jsx

@@ -1,5 +1,6 @@
 import PropTypes from "prop-types";
 
+import GpsSvg from "../../asset/icon/GPS.svg?react";
 import { keyboard_base } from "../../asset/keyboard";
 
 export default function KeyboardBase({ city }) {
@@ -10,7 +11,7 @@ export default function KeyboardBase({ city }) {
         className="btn btn-light city-btn"
         aria-label="選擇縣市"
       >
-        <img src="/icon/GPS.svg" alt="GPS" /> {city || "選擇縣市"}
+        <GpsSvg /> {city || "選擇縣市"}
       </label>
 
       <label

src/components/Keyboard/index.jsx

@@ -1,6 +1,8 @@
 import { useContext, useRef } from "react";
 import PubSub from "pubsub-js";
 
+import BusMp3 from "../../asset/Bus.mp3";
+import KeyboardSvg from "../../asset/icon/keyboard.svg";
 import { Context } from "../../pages/Layout";
 import KeyboardBase from "./KeyboardBase";
 import KeyboardCity from "./KeyboardCity";
@@ -26,7 +28,6 @@ export default function Keyboard() {
 
   return (
     <div className="keyboard-frame position-relative" onClick={pressBtn}>
-
       <input {...inputRadio} id="moreKeyboard" />
       <KeyboardMore />
 
@@ -42,16 +43,13 @@ export default function Keyboard() {
         aria-label="鍵盤 Keyboard"
       >
         <img
-          src="/icon/keyboard.svg"
+          src={KeyboardSvg}
           className="px-4 py-2"
           alt="鍵盤 Keyboard"
         />
       </label>
       <audio ref={audio}>
-        <source
-          src="/Bus.mp3"
-          type="audio/mpeg"
-        />
+        <source type="audio/mpeg" src={BusMp3} />
       </audio>
     </div>
   );

src/pages/Index/index.jsx

@@ -1,34 +1,43 @@
 import { Link } from "react-router-dom";
 import { Container } from "react-bootstrap";
 
-import "./index.scss";
+import GpsSvg from "../../asset/icon/GPS.svg?react";
+import SearchSvg from "../../asset/icon/search.svg?react";
+import LikeSvg from "../../asset/icon/like_light.svg?react";
+import TdxLogo from "../../asset/tdxlogo.png";
 
-const linkStyle = {
-  className: "btn btn-primary fs-3 p-2",
-};
+import "./index.scss";
 
 export default function Index() {
+  const links = [
+    {
+      Icon: GpsSvg,
+      title: "附近公車站",
+      to: "nearby",
+    },
+    {
+      Icon: SearchSvg,
+      title: "查詢公車",
+      to: "citybus",
+    },
+    {
+      Icon: LikeSvg,
+      title: "我的收藏",
+      to: "favorites",
+    },
+  ];
+
   return (
     <Container className="position-relative" as="nav">
       <ul className="router">
-        <li>
-          <Link to="nearby" {...linkStyle}>
-            <img src="/icon/GPS.svg" alt="搜索附近圖標" />
-            <span>附近公車站</span>
-          </Link>
-        </li>
-        <li>
-          <Link to="citybus" {...linkStyle}>
-            <img src="/icon/search.svg" alt="查詢公車圖標" />
-            <span>查詢公車</span>
-          </Link>
-        </li>
-        <li>
-          <Link to="favorites" {...linkStyle}>
-            <img src="/icon/like_light.svg" alt="我的收藏圖標" />
-            <span>我的收藏</span>
-          </Link>
-        </li>
+        {links.map(({ Icon, to, title }) => (
+          <li key={to}>
+            <Link to={to} className="btn btn-primary fs-3 p-2">
+              <Icon />
+              <span>{title}</span>
+            </Link>
+          </li>
+        ))}
       </ul>
       <footer className="fixed-bottom d-flex justify-content-center align-items-center fs-4 p-4 fw-light gap-1">
         Taiwan Bus ©
@@ -62,7 +71,7 @@ export default function Index() {
             rel="noreferrer"
           >
             <img
-              src="/tdxlogo.png"
+              src={TdxLogo}
               alt="交通部TDX平臺 Logo"
               width={120}
               className="bg-white rounded"