Resumen

¡Hola! Estoy trabajando en un pequeño proyecto sobre una aplicación de menú de restaurante, por lo que estoy creando esto en Vanilla JS usando Webpack como paquete.

Tema

el problema que tengo es que cuando estoy usando los datos de una matriz local en mi proyecto no puedo encontrar la ruta de las imágenes y realmente no sé por qué sucede esto. estructura del proyecto

Cómo estoy usando los datos de la matriz:

 import menu from '../data/data'; const Main = () => { const view = ` <div class="menu-items"> ${menu.map(menuItem => ` <article class="menu-item"> <img src=${menuItem.img} alt=${menuItem.title} class="photo" /> <div class="item-info"> <header> <h4>${menuItem.title}</h4> <h4 class="price">$${menuItem.price}</h4> </header> <p class="item-text"> ${menuItem.desc} </p> </div> </article> `).join('')} </div> `; return view; }; export default Main;

El mensaje de error que aparece en mi consola:

Mis corazonadas son: tal vez podría ser que necesito un cargador de paquete web de imágenes, pero también creo que es un problema con la forma en que estoy usando o escribiendo la ruta de las imágenes, así que si alguien sabe cómo puedo resolver esto, espero que pueda ayudar. yo.

También aquí dejé el repositorio del proyecto si es necesario para alguien: https://github.com/armandopbringas/menu-app