React Asset Not Loading from public or src Directory

Question

I deployed my portfolio using gh-pages and all my assets are not showing

I'm having trouble displaying an svg,png,JPG jpeg assets in my React project. I initially placed the file in src/assets/Leo.svg, but it didn't load. I then moved the entire assets folder to public/assets/Leo.svg, but it's still not appearing.

Strangely, the same Leo.svg file works when used as the browser tab logo (favicon), but it does not display in the navbar.

What I Tried:

1. Using an import statement when the file was in src:

   import hauAccreditationStatus from "./src/assets/hauAccreditationStatus.jpeg";
   const projects = [
    {
      title: "HAU School Department Accreditation Status",
      category: ["graphic-design"],
      image: hauAccreditationStatus,
      tech: ["Canva"],
    },

• This resulted in a module error.

2. Moving the entire assets folder to public/ and referencing it directly:

   const projects = [
    {
      title: "HAU School Department Accreditation Status",
      category: ["graphic-design"],
      image: "/assets/hauAccreditationStatus.jpeg",
      tech: ["Canva"],
    },
   

   • The image does not display in the browser.

3. Using the full path with the repository name (since it's deployed on GitHub Pages):

   <img src="/Leo_Portfolio/assets/hauAccreditationStatus.jpeg" alt="HAU Accreditation Status" />
   

   • Still no luck.

Additional Details:

• The app is deployed on GitHub Pages: Portfolio Link
• The repository is here: GitHub Repo
• I moved assets to public/, but it still doesn't work.
• I'm not very familiar with checking the browser dev tools, so I might be missing something there.

Expected Outcome: The assets should be displayed in the browser.

Question: What is the correct way to reference the image so that it loads both in development and when deployed on GitHub Pages?