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.
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;
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
I gave a quick look into your project on GIT. It seems like the "public" directory is the one that should contain the images.
That's the default directory that the server is getting the files.
Right now the images directory is on "src" directory.
When the browser requests an image on "http://localhost:8080/images/item-1.jpg" the server will look for it on "your-root-dir/public/images/item-1.jpg"
Just put yout image folder in 'public' directory, as suggested above, and it will work.