商品列表或图片展示js

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品列表</title>
<style>
  .product {
    border: 1px solid #ddd;
    margin-bottom: 10px;
    padding: 10px;
  }
  .product img {
    width: 100px;
    height: 100px;
  }
</style>
</head>
<body>

<div id="product-list"></div>

<script>
  // 假设这是从服务器获取的商品数据
  const products = [
    { id: 1, name: '商品A', price: 100, imageUrl: 'image1.jpg' },
    { id: 2, name: '商品B', price: 200, imageUrl: 'image2.jpg' },
    // ...更多商品
  ];

  // 渲染商品列表
  function renderProducts(products) {
    const productList = document.getElementById('product-list');
    productList.innerHTML = ''; // 清空现有内容

    products.forEach(product => {
      const productDiv = document.createElement('div');
      productDiv.className = 'product';

      const img = document.createElement('img');
      img.src = product.imageUrl;
      img.alt = product.name;

      const name = document.createElement('h3');
      name.textContent = product.name;

      const price = document.createElement('p');
      price.textContent = `价格: ¥${product.price}`;

      productDiv.appendChild(img);
      productDiv.appendChild(name);
      productDiv.appendChild(price);

      productList.appendChild(productDiv);
    });
  }

  // 初始渲染
  renderProducts(products);
</script>

</body>
</html>

.product img {
  width: 100%;
  height: auto;
  object-fit: cover; /* 或contain，取决于需求 */
}