HTML/CSS/JS购物车商品图片加载失败，控制台无报错求助

核心问题分析 #

你的代码里存在几个关键错误，直接导致图片无法显示，甚至商品区域根本没被渲染：

1. 致命拼写错误：innerHTMl → innerHTML #

JavaScript中DOM元素的属性是**innerHTML**（注意最后一个字母是小写L，不是大写I），属性名写错后，整个模板字符串的渲染逻辑完全不执行，#root区域始终为空，自然看不到图片。

2. CSS属性无效：.images的max-width/max-height缺失值 #

.images类里的max-width和max-height未设置具体数值，就算图片加载成功也无法正常显示，建议设置为100%适配容器。

3. 模板字符串中图片路径未加引号 #

src=${image}的写法不符合HTML规范，当路径包含特殊字符时会解析失败，应改为src="${image}"。

4. 多余的Set去重逻辑 #

categories变量用new Set处理product数组完全没必要，你的product数组只有一个对象，直接使用product即可简化代码。

修复后的完整代码 #

CSS代码（修复.images属性）

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.header {
  height: 4em;
  width: 70%;
  background: #3a3b3c;
  border-radius: 1em;
  margin: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2em;
}

.header .logo {
  font-size: 4em;
  font-weight: bold;
  color: #fff;
}

.cart {
  display: flex;
  background: #fff;
  justify-content: space-between;
  align-items: center;
  padding: 7px 10px;
  border-radius: 3px;
  width: 80px;
}

.cart p {
  height: 22px;
  width: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  background-color: #3a3b3c;
  color: #fff;
}

.grid {
  display: flex;
  width: 70%;
  margin-bottom: 30px;
}

#root {
  width: 60%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
}

.sidebar {
  width: 40%;
  border-radius: 5px;
  background: #808080;
  margin-left: 5em;
  padding: 1em;
  text-align: center;
}

.head {
  background-color: #3a3b3c;
  border-radius: 1em;
  height: 2em;
  padding: 5px;
  margin-bottom: 1em;
  color: #fff;
  display: flex;
  align-items: center;
}

.foot {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
  padding: 10px 0;
  border-top: 1px solid #212329;
}

.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #212329;
  border-radius: 5px;
  padding: 15px;
}

.img-box {
  width: 100%;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.images {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
}

.bottom {
  margin-top: 20px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 110px;
}

h2 {
  font-size: 20px;
  color: red;
}

button {
  width: 100%;
  border: none;
  border-radius: 5px;
  position: relative;
  padding: 7px 25px;
  color: #fff;
  background-color: #3a3b3c;
}

button:hover {
  background-color: #212329;
}

HTML/JS代码（修复拼写错误和模板字符串）

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title>perfume</title>
  <link href="stats.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
 </head>
 <body>
  <div class="header">
   <p class="logo">Amazon, Spend less smile more</p>
   <div class="cart">
    <i class="bi bi-cart4"></i>
    <p id="count">0</p>
   </div>
  </div>
  <div class="grid">
   <div id="root"></div>
   <div class="sidebar">
    <div class="head">
     <p>My Stuff</p>
    </div>
    <div id="cartItem">Your cart is Empty</div>
    <div class="foot">
     <h3>Total</h3>
     <h2 id="total">$ 0.00</h2>
    </div>
   </div>
  </div>
  <script type="text/javascript">
    const product = [
      {
        id: 0,
        image: "product/perfume.jpeg",
        title: "Victoria Secret Perfume",
        price: 50,
      },
    ];

    let i = 0;
    document.getElementById("root").innerHTML = product
      .map((item) => {
        let { image, title, price } = item;
        return (
          `<div class='box'>
            <div class='img-box'>
              <img class='images' src="${image}" alt="${title}"></img>
            </div>
            <div class='bottom'>
              <p>${title}</p>
              <h2>$ ${price}.00</h2>
              <button onclick='addtocart(${i++})'>Add to cart</button>
            </div>
          </div>`
        );
      })
      .join("");

    function addtocart(index) {
      const item = product[index];
      console.log("Added to cart:", item);
      // 可在此添加购物车更新逻辑（如修改count和total）
    }
  </script>
 </body>
</html>

额外注意事项 #

• 确保图片路径product/perfume.jpeg正确：HTML文件所在目录下需有product文件夹，且内部存放perfume.jpeg图片。
• 修复了侧边栏文本拼写错误：Empthy改为Empty。
• 给按钮添加默认背景色，避免按钮透明导致文字不可见。
• 引入Bootstrap图标库，确保购物车图标正常显示。

内容的提问来源于stack exchange，提问作者BoJacks JJ