Why are the images not showing up on the React website deployed using GitHub Pages?

Question

I created a website using React and Vite. It works as expected on my local machine. But, after it was deployed on GitHub Pages, the images didn't load up. Everything else was working fine. The images on the website are passed as props as you can see in the image below. Here are the code snippets, GitHub repo and the error encountered.

/* eslint-disable react/prop-types */
import location from "../assets/location.svg"
import map from "../assets/map.svg"

export default function Card(props) {
  return(
    <div className="card">
      <div className="card-img">
        <img src={`./public/images/${props.img}`} alt="Tokyo, Japan" title={props.loc} />
      </div>

      <div className="card-desc">
        <h2>{props.title}</h2>
        <div className="loc">
          <img src={location} alt="" />
          <p>&nbsp;{props.loc}</p>&nbsp;•&nbsp;<a className = "maps" href={props.map} target="_blank" rel="noreferrer">See on Google Maps&nbsp;<img src={map} alt="" /></a>
        </div>

        <p><strong>Expenses: </strong>&nbsp;{props.exp}</p>
        <p><strong>Languages:</strong>&nbsp;{props.lang}</p>

        <div className="desc">
          <p className="description">{props.desc}</p>
        </div>
      </div>
    </div>
  )
}

The error message:

    Failed to load resource: the server responded with a status of 404 ()

eiffel.jpg:1

GitHub Repository Link

I read a few posts regarding this problem and most of them suggested that I move the images from src/assets (which they were previously in) to public folder which I already did and corrected the component file to include the new directory name. But even after that, the problem persists.

I have recently started learning React and any help is appreciated.

Answer 1

I noticed that the image is located at this path

You need to change the path:

<img src={`./images/${props.img}`} alt="Tokyo, Japan" title={props.loc} />