Summary

Hey there! i’m working on a small project about a restaurant menu app which so i’m building this in vanilla JS using webpack as bundler.

Issue

the problem that i have is that when i’m using the data from a local array in my project can’t find the images path and i really don’t know why is happen this. project structure

How i’m using the data from the array:

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;

The error message appearing in my console:

My hunches are: maybe could be that i need an image webpack loader but also i think that is a problem with how i'm using or writing the images path, so if someone knows how i can solve this, pleas i hope you can help me.

Also here i left the project repo if is necessary for someone: https://github.com/armandopbringas/menu-app