in my react application the first image in component display but the 4 others one didn't-CodePudding

I want to display 5 images in website e-commerce. so they are all inside the same folder images and had the same size but the first one is displayed but the rest didn't I don't know why. if it had a mistake in this code i think all the images don't display that no expect just one image please help me so these are my files :

app.js file :

import React from 'react';
import data from './data';

function App() {
  return (
  <div className="grid-container" >
      <header className="row" >
        <div><a className="brand" href="index.html">My shop</a></div>
        <div>
          <a href="cart.html">Cart</a>
          <a href="signin.html">Sign In</a>
        </div>
        
      </header>
      <main>
      <div className="row center" >
        {
          data.products.map((product) => {
            return (
            <div key={product._id} className="card" >
            <a href={`/product/${product._id}`}>
              <img className="medium" src={product.image} alt={product.name} />
             </a>
            <div className="card-body" >
              <a href={`/product/${product._id}`}>
                <h2>{product.name}</h2>
                </a>
              <div className="rating" >
                <span>
                  <i className="fa fa-star"></i>
                </span>
                <span>
                  <i className="fa fa-star"></i>
                </span>
                <span>
                  <i className="fa fa-star"></i>
                </span>
                <span>
                  <i className="fa fa-star"></i>
                </span>
                <span>
                  <i className="fa fa-star-half-o"></i>
                </span>
              </div>
              <div className="price">
                {product.price}
              </div>
            </div>

          </div>
            )
    

          })
        }
       </div> 
         
         
          
      </main>
      <footer className="row center" >All right reserved</footer>
    </div>  
  )
}

export default App;

data.js file:

const data = {
    products: [

    {
        _id: '1',
        name: 'aprilia rsv4',
        category: 'mecanics',
        image: '../images/product-1.jpg',
        price: '$19000',
        brand: 'Aprilia',
        rating: 4.5,
        numReviews: 10,
        description: 'High quality product'
    },
    {
        _id: '2',
        name: 'aprilia sr 50 Biagi',
        category: 'mecanics',
        image: '../images/product-2.jpg',
        price: '$1850',
        brand: 'Aprilia',
        rating: 4.5,
        numReviews: 22,
        description: 'High quality product'
    },
    {
        _id: '3',
        name: 'ducati monster 110s 2009',
        category: 'mecanics',
        image: '../images/product-3.jpg',
        price: '$13600',
        brand: 'Ducati',
        rating: 4.7,
        numReviews: 8,
        description: 'High quality product'
    },
    {
        _id: '4',
        name: 'Honda 623 cbr',
        category: 'mecanics',
        image: '../images/product-4.jpg',
        price: '$1900',
        brand: 'Honda',
        rating: 5,
        numReviews: 8,
        description: 'High quality product'
    },
    {
        _id: '5',
        name: 'Harley Davidson',
        category: 'mecanics',
        image: '../images/product-5.jpg',
        price: '$16900',
        brand: 'Harley',
        rating: 5,
        numReviews: 6,
        description: 'High quality product'
    }
    ]
};
export default data;

CodePudding user response：

No. you can not do that. Please put your image into public/images and use an absolute path like /images/product-5.jpg for the image.