How can i get local image to load in react while bringing the path from an object attribute

i want to load an image locally stored

export const dataJeuxGrosLot = [
{
    id: 1,
    title: 'Jeu Spécial Noel',
    price: '$59.99',
    prize: '$3000.99',
    startDate: new Date(2023, 2, 20, 15, 30, 12), // (yyyy, mm, dd, hh, mm, ss)
    endDate: new Date(2023, 2, 30, 23, 59, 59), // (yyyy, mm, dd, hh, mm, ss)
    drawDate: new Date(2023, 3, 1, 12, 0, 0), // (yyyy, mm, dd, hh, mm, ss)
    linkImg:
        '../../images/halloween.jpg',
}]

i’m trying to load the image plus the other attribures like so:

{dataJeuxGrosLot.map(item => (
                    <div className="card">
                        <div className="card-top">
                            <img src={item.linkImg} alt={item.title}/>
                            <h1>{item.title}</h1>
                        </div>
                        <div className="card-bottom">
                            <h3>{item.price}</h3>
                            <h3>{item.startDate.toLocaleString()}</h3>
                            <span className="category">{item.prize}</span>
                        </div>
                    </div>

                ))}

But image dosen’t load and shows alt value any suggestions

>Solution :

Depending on what particular react framework or bundler you are using you’ll likely have to import the images manually first and assign it to the linkIMG property of an item in your dataJeuxGrosLot array. Otherwise the image will not be included in the project once you build it and cannot be found.

import halloween from "../../images/halloween.jpg";

export const dataJeuxGrosLot = [
  {
    id: 1,
    title: "Jeu Spécial Noel",
    price: "$59.99",
    prize: "$3000.99",
    startDate: new Date(2023, 2, 20, 15, 30, 12),
    endDate: new Date(2023, 2, 30, 23, 59, 59),
    drawDate: new Date(2023, 3, 1, 12, 0, 0),
    linkImg: halloween
  }
];