404 not found image in javascript

I’m working with javascript. I have an array of objects that include my datas like id, title,price and image.now I want to get this data from array of objects and show it. it works well with id,title and price and I can see them in output but it dosen’t show the image. the image is in a folder named “products-img” and image name is “flight.jpg” here is error: GEThttp://localhost:81/finalproject/products-img/flight.jpg/ [HTTP/1.1 404 Not Found 11ms] and here is the codes :

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 class="cart-item-controller">
          <i class="fas fa-chevron-up" data-id=${cartItem.id}></i>
          <p>${cartItem.quantity}</p>
          <i class="fas fa-chevron-down" data-id=${cartItem.id}></i>
        </div>
        <div class="cart-item-trash" data-id=${cartItem.id}>
          <i class="fa fa-trash-o"></i>
        </div>`;
        cartContent.appendChild(div);
    }

and one more thing is that I used this image in somewhere else in the project and it works… help plz:(

Answer

Put the attribute in quotes. Otherwise, the / from /> is being treated as part of the URL since you have no space after the URL.

div.innerHTML = `<img class="cart-item-img" src="${cartItem.imageURl}" />