• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

114
Views
Can't find images paths from a local data array

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

enter image description here

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:

enter image description here

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

almost 3 years ago · Juan Pablo Isaza
3 answers
Answer question

0

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"

almost 3 years ago · Juan Pablo Isaza Report

0

Just put yout image folder in 'public' directory, as suggested above, and it will work.

almost 3 years ago · Juan Pablo Isaza Report

0

  1. Move the images folder to the public folder.
  2. Change the img link in the data menu array - /images/item-1.jpeg

enter image description here

enter image description here

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error