Image does not load in react

Question

I am trying to load an image to a react web app. Here is the code.

export default function Card(props) {
    return (
      <div className="card">
        <img src={`./${props.img}`} alt="Ngong hills image" className="card--image" />
        <div className="card-stats">
          <img src={Star} className="card--star" />
          <span>5.0</span>
          <span className="gray">(6) • </span>
          <span className="gray">KEN</span>
        </div>
        <p>Visit Ngong with Stephen Muchendu</p>
        <p>
          <span className="bold">From $100</span>
        </p>
      </div>
    );
}

However, the image does not load. What could be the problem?

Answer 1

export default function Card(props) {
    return (
      <div className="card">
        <img src={props.img} alt="Ngong hills image" className="card--image" />
        <div className="card-stats">
          <img src={Star} className="card--star" />
          <span>5.0</span>
          <span className="gray">(6) • </span>
          <span className="gray">KEN</span>
        </div>
        <p>Visit Ngong with Stephen Muchendu</p>
        <p>
          <span className="bold">From $100</span>
        </p>
      </div>
    );
}