Estoy trabajando en un proyecto de reacción personal para aprender y considerar el mapeo de datos de un archivo de objeto JavaScript (no JSON en este caso). Hay muchas maneras de hacerlo. Este método funciona para import product1 from "../../assets/images/products/product1.jpeg"; <img src={ product1 } alt="item_image" /> Pero quiero hacerlo de otra manera. Quiero recuperar datos de un archivo de objeto de JavaScript (no JSON) mediante el mapeo. Mi archivo data.js contiene datos como este:

 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; }

y mapear datos de esta manera

 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;

Pero no pude obtener la imagen de esto. Después de buscar en Internet, traté de declarar la propiedad de la path usando la ruta de este método path: "file:///home/user/Documents/testapp/src/assets/images/products/product1.jpeg" Desafortunadamente, este método tampoco pudo obtener la imagen del producto Estoy esperando una mejor solución de la comunidad. --Gracias.