React isn't loading local images

April 1, 2023

My Images won’t load on any websites which have the format of localhost:3000/X/Y or greater. Like even localhost:3000/X/Y, this won’t have any images being loaded. But, localhost:3000/X works fine.

These are the structure of my directories:

Now, the code for my App.js is:

import "./stylesheets/App.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import NavContainer from "./components/NavContainer";
import Home from "./pages/Home";
import Courses from "./pages/Courses";
import SignIn from "./pages/SignIn";
import NewCourse from "./pages/NewCourse";
import Course from "./pages/Course";
import Profile from "./pages/Profile";
import Footer from "./components/Footer";
import Error from "./pages/Error";

function App() {
  const user = true;

  const my_data = [
    {
      _id: "1",
      Picture: "./sampleCourse.png",
      Language: "English",
      InstructorName: "Koustav Sen",
      InstructorImage: "./koustav.png",
      CourseName: "Complete Course on Computer Networks - Part I",
      Description:
        "In this course, Koustav will cover Computer Networks. All the important topics will be discussed in detail and would be helpful for aspirants preparing for the GATE exam.",
      TotalVideos: "10",
      StartDate: "21 Apr, 2021",
      EndDate: "7 May, 2021",
      TotalVideoLengh: "2h 30m",
      Price: 500,
      Rating: 4.5,
    },
    {
      _id: "2",
      Picture: "./sampleCourse.png",
      Language: "English",
      InstructorName: "Koustav Sen",
      InstructorImage: "./koustav.png",
      CourseName: "Complete Course on Computer Networks - Part II",
      Description:
        "In this course, Koustav will cover Computer Networks. All the important topics will be discussed in detail and would be helpful for aspirants preparing for the GATE exam.",
      TotalVideos: "10",
      StartDate: "21 Apr, 2021",
      EndDate: "7 May, 2021",
      TotalVideoLengh: "2h 30m",
      Price: 500,
      Rating: 4.5,
    },
    {
      _id: "3",
      Picture: "./sampleCourse.png",
      Language: "English",
      InstructorName: "Koustav Sen",
      InstructorImage: "./koustav.png",
      CourseName: "Complete Course on Computer Networks - Part III",
      Description:
        "In this course, Koustav will cover Computer Networks. All the important topics will be discussed in detail and would be helpful for aspirants preparing for the GATE exam.",
      TotalVideos: "10",
      StartDate: "21 Apr, 2021",
      EndDate: "7 May, 2021",
      TotalVideoLengh: "2h 30m",
      Price: 500,
      Rating: 4.5,
    },
    {
      _id: "4",
      Picture: "./sampleCourse.png",
      Language: "English",
      InstructorName: "Koustav Sen",
      InstructorImage: "./koustav.png",
      CourseName: "Complete Course on Computer Networks - Part IV",
      Description:
        "In this course, Koustav will cover Computer Networks. All the important topics will be discussed in detail and would be helpful for aspirants preparing for the GATE exam.",
      TotalVideos: "10",
      StartDate: "21 Apr, 2021",
      EndDate: "7 May, 2021",
      TotalVideoLengh: "2h 30m",
      Price: 500,
      Rating: 4.5,
    },
  ];

  const text1 = "All Courses";
  const text2 = "My Courses";
  const text3 = "Check Out";

  return (
    <div className="App">
      <Router>
        <NavContainer />
        <div className="Sections">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route
              path="/courses"
              element={<Courses data={my_data} text={text1} />}
            />
            <Route
              path="/classroom"
              element={
                user ? (
                  <Courses data={my_data} text={text2} />
                ) : (
                  <Error type="401" />
                )
              }
            />

            <Route
              path="/checkout"
              element={user ? <Courses data={my_data} text={text3} checkout={true} /> : <Error type="401" />}
            />

            <Route
              path="/course/:id"
              element={user ? <Course /> : <Error type="401" />}
            />

            <Route
              path="/profile"
              element={user ? <Profile /> : <Error type="401" />}
            />

            <Route
              path="/create-course"
              element={user ? <NewCourse /> : <Error type="401" />}
            />

            <Route path="/signin" element={<SignIn />} />
            <Route path="/error" element={<Error type="500" />} />
            <Route path="*" element={<Error type="404" />} />
          </Routes>
        </div>
        <Footer />
      </Router>
    </div>
  );
}

export default App;

Code for index.js:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

Code for Course.js (rendered when the URL is localhost:3000/course/:id) which is one of the problematic instances of the image not loading.

import "../stylesheets/Course.css";
import CourseDetails from "../components/CourseDetails";
import VideoCard from "../components/VideoCard";
import LessonAdder from "../components/LessonAdder";


const data = {
  Picture: "./koustav.png",
  Language: "English",
  InstuctorName: "Koustav Sen",
  CourseName: "Complete Course on Computer Networks - Part I",
  Description:
    "In this course, Koustav Sen will cover Computer Networks. All the important topics will be discussed in detail and would be helpful for aspirants preparing for the GATE exam.",
  TotalVideos: "10",
  StartDate: "21 Apr 2021",
  EndDate: "7 May 2021",
  TotalVideoLengh: "2h 30m",
  Price: "₹500",
};

const video = [
  {
    VideoName: "Introduction to Computer Networks",
    VideoSerial: "1",
    VideoDate: "21 APR 2021",
    VideoLength: "30m",
  },
  {
    VideoName: "Introduction to Computer Networks",
    VideoSerial: "2",
    VideoDate: "23 APR 2021",
    VideoLength: "30m",
  },
  {
    VideoName: "Introduction to Computer Networks",
    VideoSerial: "3",
    VideoDate: "25 APR 2021",
    VideoLength: "30m",
  },
  {
    VideoName: "Introduction to Computer Networks",
    VideoSerial: "4",
    VideoDate: "27 APR 2021",
    VideoLength: "30m",
  },
  {
    VideoName: "Introduction to Computer Networks",
    VideoSerial: "5",
    VideoDate: "29 APR 2021",
    VideoLength: "30m",
  },
  {
    VideoName: "Introduction to Computer Networks",
    VideoSerial: "6",
    VideoDate: "01 MAY 2021",
    VideoLength: "30m",
  },
  {
    VideoName: "Introduction to Computer Networks",
    VideoSerial: "7",
    VideoDate: "02 MAY 2021",
    VideoLength: "30m",
  },
  {
    VideoName: "Introduction to Computer Networks",
    VideoSerial: "8",
    VideoDate: "03 MAY 2021",
    VideoLength: "30m",
  },
  {
    VideoName: "Introduction to Computer Networks",
    VideoSerial: "9",
    VideoDate: "05 MAY 2021",
    VideoLength: "30m",
  },
  {
    VideoName: "Introduction to Computer Networks",
    VideoSerial: "10",
    VideoDate: "07 MAY 2021",
    VideoLength: "30m",
  },
];

function Course() {
  return (
    <div className="Course">
      <div className="DetailsContainer">{CourseDetails(data)}</div>

      <div className="VideoContainer">
        <div>
          {video.map((v) => (
            <VideoCard key={v.VideoSerial} Data={v} />
          ))}
        </div>
        <div>
            <LessonAdder/>
        </div>
      </div>
    </div>
  );
}
export default Course;

I feel there is some problem with the routing but I am not sure what.

>Solution :

Use absolute image source paths instead of relative paths. When you use "./kaustav.png" and the current URL path is "/x/y" the browser uses the relative path and looks for the image in a "/x" directory that doesn’t exist.

According to your screenshot the images are in the root of the public directory, e.g. "/kaustav.png".

const data = {
  Picture: "/koustav.png", // <-- absolute path
  Language: "English",
  InstuctorName: "Koustav Sen",
  CourseName: "Complete Course on Computer Networks - Part I",
  Description:
    "In this course, Koustav Sen will cover Computer Networks. All the important topics will be discussed in detail and would be helpful for aspirants preparing for the GATE exam.",
  TotalVideos: "10",
  StartDate: "21 Apr 2021",
  EndDate: "7 May 2021",
  TotalVideoLengh: "2h 30m",
  Price: "₹500",
};