I am currently working with JavaScript and have encountered an issue. I have an array of objects that contain various data such as id, title, price, and image. I need to retrieve this data from the array in order to display it. While I am able to successfully display the id, title, and price, I am facing difficulties displaying the image. The image is stored in a folder called "products-img" and the file name is "flight.jpg". When attempting to load the image, I receive the following error message: GET http://localhost:81/finalproject/products-img/flight.jpg/ [HTTP/1.1 404 Not Found 11ms]. Below are the relevant code snippets:
addCartItem(cartItem){
const div = document.createElement("div");
div.classList.add("cart-item");
div.innerHTML = '<img class="cart-item-img" src=${cartItem.imageURl}/>'+
'<div class="cart-item-desc">'+
'<h5>${cartItem.title} </h5>'+
'<h6>${cartItem.price.toFixed(3)}</h6>'+
'</div>'+
'</div>';
cartContent.appendChild(div);
}
It's important to note that I have employed this exact same image elsewhere in my project and it loads properly. Any assistance would be greatly appreciated.