React is not rendering .png photos on browser

Question

I'm working on a small workshop app, but I have trouble displaying the photos of the cars in the browser.

I just get the placeholder on an image

import React from "react";

function Products() {
  const cars = [
    {
      id: 1,
      name: "Toyota Camry",
      price: 25000,
      img: "../assets/images/toyota_camry2023.png",
    },
    {
      id: 2,
      name: "Honda Civic",
      price: 27000,
      img: "../assets/images/honda_civic2023.png",
    },
    {
      id: 3,
      name: "Ford Mustang",
      price: 35000,
      img: "../assets/images/ford_mustang2023.png",
    },
  ];

  return (
    <div>
      <h2>Find The Best Deals</h2>
      <h2>Available Cars</h2>
      <ul>
        {cars.map((car) => (
          <li key={car.id}>
            <img src={car.img} alt={car.name} />
            <h3>{car.name}</h3>
            <p>Price: ${car.price}</p>
            <button>More details</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Products;

Tried all solutions previously provided in Stackoverflow about a similar issue but it did not work.

Answer 1

Use import toyota from '../assets/toyota.png'

const cars = [{ ...car, img: toyota }]

or add files in public folder and use absolute path from public folder.