问题描述
我正在使用 JavaScript。我有一个对象数组,其中包括我的数据,如 id、标题、价格和图像。现在我想从对象数组中获取这些数据并显示它。它适用于 id、title 和 price,我可以在输出中看到它们,但它不显示图像。图像位于名为“products-img”的文件夹中,图像名称为“flight.jpg”,这是错误: GEThttp://localhost:81/finalproject/products-img/flight.jpg/ [HTTP/1.1 404 未找到 11 毫秒] 这是代码:
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);
}
还有一件事是我在项目的其他地方使用了这个图像并且它有效......帮助plz:(
解决方法
将属性放在引号中。否则,来自 /
的 />
将被视为 URL 的一部分,因为 URL 后没有空格。
div.innerHTML = `<img class="cart-item-img" src="${cartItem.imageURl}" />