How to display img in React component?

Question

JavaScript

This is the category component. It showed images. All images are in public/img/
Book Component

const Book = ({ id, imgUrl, title, author, category, history }) => {
  return (
    <div
      className="Book"
      onClick={() => {
        const newPath = `/${category}/${id}`;
        history.push(newPath);
      }}
    >
      <img src={`img/${imgUrl}`} alt="book" width="240" height="320" />
      <div className="title">{title}</div>
      <div className="author">{author}</div>
    </div>
  );
};

This is a component of the description of the book (the transition is implemented by clicking through the router). The image is not visible even though it is in the same folder as before.
Book description component

const BookDetails = ({ bookId, category }) => {
  const obj = books[category];
  const { imgUrl, title, author } = obj[bookId - 1];
  return (
    <div className="BookDetails">
      <img src={`img/${imgUrl}`} alt="book" />
      <div className="info">
        <h2>{title}</h2>
        <span className="author">{author}</span>
        <p className="description">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita,
          voluptate. Magnam voluptatum qui consequatur mollitia quaerat,
          inventore accusamus, facilis perspiciatis, repudiandae nesciunt
          deserunt et sint. Voluptas, ipsam qui? Illum officiis velit quae,
          minus quaerat odio libero corporis ut, exercitationem quasi voluptate
          voluptatibus voluptates inventore aspernatur repellendus vel ratione
          vitae ducimus cumque. Et mollitia modi earum laboriosam aliquid sed
          voluptate quo in?
        </p>
        <Link to={`/${category}`} className="linkToBack">
          ←&nbsp;&nbsp;{category} books
        </Link>
      </div>
    </div>
  );
};

What could be the problem?

Answer 1

write url from site root

<img src={`/img/${imgUrl}`} alt="book" width="240" height="320" />