I am working on a personal react project for learning and considering to mapping data from a JavaScript object file (not JSON in this case). There are many ways to do it. This method of works for me import product1 from "../../assets/images/products/product1.jpeg"; <img src={ product1 } alt="item_image" /> But I want to do it differently. I want retrieve data from a JavaScript object file (not JSON) using mapping. My data.js file contains data like this-

const data = [
    {
        id: 1,
        title: "Meat",
        price: €2.5,
        category: "Grocery",
        path: "../../assets/images/products/product1.jpeg",
    },    
    {
        id: 2,
        title: "Milk",
        price: €1.25,
        category: "Drink",
        path: "../../assets/images/products/product2.jpeg",
    }
]

export function getData () {
    return data;
}

and mapping data in this way

import { getData } from "./data";
function Product () {

    const product = getData();

    return (
        <>
            {   
                product.map((item) => (
                    <div>
                        <div>
                            <div>
                                <div>
                                    <span> { item.title } </span>
                                </div>
                                <div>
                                    <span> { item.price } </span>
                                </div>
                            </div>
                            <div>
                                <img src={ item.path } alt="item-img" />
                            </div>
                            <div>
                                <div>
                                    <span> { item.category } </span>
                                </div>
                            </div>
                        </div>
                    </div>
                ))
            }
        </>
    );
}

export default Product;

But I failed to get the image from this. After looking on internet, I tried to declare the path property using this method path: "file:///home/user/Documents/testapp/src/assets/images/products/product1.jpeg" Unfortunately this method also failed to get the product image. I am expecting a better solution from the community. --Thanks.