Fix path issue to display images/css

index.html

@@ -7,9 +7,9 @@
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700" rel="stylesheet" />
 
-  <link rel="shortcut icon" href="/src/assets/img/favicon.png" type="image/x-icon" />
-  <link rel="stylesheet" href="/src/core-ui/main.scss" />
-  <script type="module" defer src="/src/scripts/controller.js"></script>
+  <link rel="shortcut icon" href="src/assets/img/favicon.png" type="image/x-icon" />
+  <link rel="stylesheet" href="src/core-ui/main.scss" />
+  <script type="module" defer src="src/scripts/controller.js"></script>
 
   <title>Forkify Recipes</title>
 </head>
@@ -18,13 +18,13 @@
   <div class="container">
     <header class="header">
       <a href="https://forkify-recipe-api.vercel.app/">
-        <img src="/src/assets/img/logo.png" alt="Logo" class="header__logo" />
+        <img src="src/assets/img/logo.png" alt="Logo" class="header__logo" />
       </a>
       <form class="search">
         <input type="text" class="search__field" placeholder="Search over 1,000,000 recipes..." />
         <button class="btn search__btn">
           <svg class="search__icon">
-            <use href="/src/assets/img/icons.svg#icon-search"></use>
+            <use href="src/assets/img/icons.svg#icon-search"></use>
           </svg>
           <span>Search</span>
         </button>
@@ -35,15 +35,15 @@
           <li class="nav__item">
             <button class="nav__btn nav__btn--add-recipe">
               <svg class="nav__icon">
-                <use href="/src/assets/img/icons.svg#icon-edit"></use>
+                <use href="src/assets/img/icons.svg#icon-edit"></use>
               </svg>
               <span>Add recipe</span>
             </button>
           </li>
           <li class="nav__item">
             <button class="nav__btn nav__btn--bookmarks">
               <svg class="nav__icon">
-                <use href="/src/assets/img/icons.svg#icon-bookmark"></use>
+                <use href="src/assets/img/icons.svg#icon-bookmark"></use>
               </svg>
               <span>Bookmarks</span>
             </button>
@@ -52,7 +52,7 @@
                 <div class="message">
                   <div>
                     <svg>
-                      <use href="/src/assets/img/icons.svg#icon-smile"></use>
+                      <use href="src/assets/img/icons.svg#icon-smile"></use>
                     </svg>
                   </div>
                   <p>
@@ -89,7 +89,7 @@
         <div class="message">
           <div>
             <svg>
-              <use href="/src/assets/img/icons.svg#icon-smile"></use>
+              <use href="src/assets/img/icons.svg#icon-smile"></use>
             </svg>
           </div>
           <p>Hungry? Start by searching for a recipe or an ingredient. Have fun!</p>
@@ -133,7 +133,7 @@ <h3 class="upload__heading">Ingredients</h3>
 
       <button class="btn upload__btn">
         <svg>
-          <use href="/src/assets/img/icons.svg#icon-upload-cloud"></use>
+          <use href="src/assets/img/icons.svg#icon-upload-cloud"></use>
         </svg>
         <span>Upload</span>
       </button>