How can I dynamically load an image from props in reactjs?

Question

This is my code where all the data is loaded dynamically, however the image is not loaded:

function ProductScreen(props) {
  const product = data.products.find((x) => x._id == props.match.params.id);
  return (
    <div>
      <div className="details">
        <div className="details-image">
          <img src={product.image} alt="product" />       /* Is something is wrong here is this line */
        </div>
        <div className="details-info">
          <ul>
            <li>
              <h4>{product.name}</h4>
            </li>
          </ul>
        </div>
      </div>
    </div>
  );
}

And this is the code where data is coming as a props

export default {
  products: [
    {
      _id: 1,
      name: "Slim Shirt",
      category: "Shirts",
      image: "images/d1.jpg",
      price: 60,
      brand: "Nike",
      rating: 3.5,
      numReviews: 21,
    }
  ],
};

Answer 1

Add / in your image property assuming that you put the image folder in the public folder.