Image Path Changes in All Chapters

Chapter 04 - Talk is Cheap, show me the code/Coding/App.js

@@ -3,7 +3,7 @@
 
 import React from "react";
 import ReactDOM from "react-dom/client";
-import FoodFireLogo from "../Images/Food Fire Logo.png";
+import foodFireLogo from "../../public/Images/foodFireLogo.png";
 
 /* My Food App structure will look like this, 
             1) Header
@@ -26,7 +26,7 @@ import FoodFireLogo from "../Images/Food Fire Logo.png";
 // Title component for display logo
 const Title = () => (
   <a href="/">
-    <img className="logo" src={FoodFireLogo} alt="Food Fire Logo" />
+    <img className="logo" src={foodFireLogo} alt="Food Fire Logo" />
   </a>
 );
 
@@ -40,7 +40,9 @@ const Header = () => {
           <li>Home</li>
           <li>About</li>
           <li>Contact</li>
-          <li><i class="fa-solid fa-cart-shopping"></i></li>
+          <li>
+            <i class="fa-solid fa-cart-shopping"></i>
+          </li>
         </ul>
       </div>
     </div>
@@ -1888,7 +1890,10 @@ const RestaurantCard = ({
       <h4>{cuisines.join(", ")}</h4>
       <h4>{area}</h4>
       <span>
-        <h4><i class="fa-solid fa-star"></i>{avgRating}</h4>
+        <h4>
+          <i class="fa-solid fa-star"></i>
+          {avgRating}
+        </h4>
         <h4>{lastMileTravelString}</h4>
         <h4>{costForTwoString}</h4>
       </span>

Chapter 05 - Let's get Hooked!/Coding/Components/Header.js

@@ -1,9 +1,9 @@
-import FoodFireLogo from "../Images/Food Fire Logo.png";
+import foodFireLogo from "../../../public/Images/foodFireLogo.png";
 
 // Title component for display logo
 const Title = () => (
   <a href="/">
-    <img className="logo" src={FoodFireLogo} alt="Food Fire Logo" />
+    <img className="logo" src={foodFireLogo} alt="Food Fire Logo" />
   </a>
 );
 

Chapter 06 - Exploring the world/Coding/Components/Header.js

@@ -1,12 +1,12 @@
 import { useState } from "react";
-import FoodFireLogo from "../Images/Food Fire Logo.png";
+import foodFireLogo from "../../../public/Images/foodFireLogo.png";
 
 // Title component for display logo
 const Title = () => (
   <a href="/">
     <img
       className="logo"
-      src={FoodFireLogo}
+      src={foodFireLogo}
       alt="Food Fire Logo"
       title="Food Fire"
     />

Chapter 07 - Finding the Path/Coding/Components/About.js

@@ -1,4 +1,4 @@
-import food from "../Images/burger-image.png";
+import burgerImage from "../../../public/Images/burgerImage.png";
 
 const About = () => {
   return (
@@ -12,7 +12,7 @@ const About = () => {
         </h4>
       </div>
       <div className="about-right">
-        <img src={food} alt="Food Image" />
+        <img src={burgerImage} alt="Food Image" />
       </div>
     </div>
   );

Chapter 07 - Finding the Path/Coding/Components/Contact.js

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import contact from "../Images/Contact-Us.png";
+import contactUs from "../../../public/Images/contactUs.png";
 
 const Contact = () => {
   const [message, setMessage] = useState(false);
@@ -10,7 +10,7 @@ const Contact = () => {
   return (
     <div className="contact-container">
       <div className="contact-left">
-      <img src={contact} alt="" />
+      <img src={contactUs} alt="" />
       </div>
       <div className="contact-right">
       <h1>Contact us</h1>

Chapter 07 - Finding the Path/Coding/Components/Error.js

@@ -1,12 +1,12 @@
-import ErrorImage from "../Images/404 Error.jpg";
+import errorImage from "../../../public/Images/errorImage.jpg";
 import { useRouteError, Link } from "react-router-dom"; // import useRouteError for routing error
 
 const Error = () => {
   // call useRouteError so we can access error data while routing
   const err = useRouteError();
   return (
     <div className="error-page">
-      <img src={ErrorImage} alt="Error Image" />
+      <img src={errorImage} alt="Error Image" />
       <h1>Oops! The restaurant you're looking for can't be found.</h1>
       <h3 className="error-data">{err.data}</h3>
       <h3 className="error-back-home">

Chapter 07 - Finding the Path/Coding/Components/Header.js

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import FoodFireLogo from "../Images/Food Fire Logo.png";
+import foodFireLogo from "../../../public/Images/foodFireLogo.png";
 import { Link } from "react-router-dom"; // imported Link for client side routing
 import { useNavigate } from "react-router-dom";
 
@@ -8,7 +8,7 @@ const Title = () => (
   <a href="/">
     <img
       className="logo"
-      src={FoodFireLogo}
+      src={foodFireLogo}
       alt="Food Fire Logo"
       title="Food Fire Logo"
     />

Chapter 08 - Let's get Classy/Coding/Components/About.js

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { Link, Outlet } from "react-router-dom";
-import food from "../Images/burger-image.png";
+import burgerImage from "../../../public/Images/burgerImage.png";
 
 const About = () => {
   const [show, setShow] = useState(false);
@@ -43,7 +43,7 @@ const About = () => {
           </h4>
         </div>
         <div className="about-right">
-          <img src={food} alt="Food Image" />
+          <img src={burgerImage} alt="Food Image" />
         </div>
       </div>
     </div>

Chapter 08 - Let's get Classy/Coding/Components/Contact.js

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import contact from "../Images/Contact-Us.png";
+import contactUs from "../../../public/Images/contactUs.png";
 
 const Contact = () => {
   const [message, setMessage] = useState(false);
@@ -10,7 +10,7 @@ const Contact = () => {
   return (
     <div className="contact-container">
       <div className="contact-left">
-      <img src={contact} alt="" />
+      <img src={contactUs} alt="" />
       </div>
       <div className="contact-right">
       <h1>Contact us</h1>

Chapter 08 - Let's get Classy/Coding/Components/Error.js

@@ -1,12 +1,12 @@
-import ErrorImage from "../Images/404 Error.jpg";
+import errorImage from "../../../public/Images/errorImage.jpg";
 import { useRouteError, Link } from "react-router-dom"; // import useRouteError for routing error
 
 const Error = () => {
   // call useRouteError so we can access error data while routing
   const err = useRouteError();
   return (
     <div className="error-page">
-      <img src={ErrorImage} alt="Error Image" />
+      <img src={errorImage} alt="Error Image" />
       <h1>Oops! The restaurant you're looking for can't be found.</h1>
       <h3 className="error-data">{err.data}</h3>
       <h3 className="error-back-home">

Chapter 08 - Let's get Classy/Coding/Components/Header.js

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import FoodFireLogo from "../Images/Food Fire Logo.png";
+import foodFireLogo from "../../../public/Images/foodFireLogo.png";
 import { Link } from "react-router-dom"; // imported Link for client side routing
 import { useNavigate } from "react-router-dom";
 
@@ -8,7 +8,7 @@ const Title = () => (
   <a href="/">
     <img
       className="logo"
-      src={FoodFireLogo}
+      src={foodFireLogo}
       alt="Food Fire Logo"
       title="Food Fire Logo"
     />