如何在HBS中仅用一个img标签访问不同商品图片？

完全可以用单个img标签实现不同商品图片的动态加载，下面分前端逻辑和Express后端配置两部分解决你的问题，同时排查常见路径错误：

一、前端动态切换图片核心逻辑 #

通过监听商品选项的点击事件，修改img标签的src属性即可实现，不需要多个img标签。

示例代码： #

HTML结构

<!-- 商品选择区域 -->
<div class="product-item" data-id="1">商品A</div>
<div class="product-item" data-id="2">商品B</div>

<!-- 单个详情图片容器 -->
<img id="product-detail-img" src="/images/default.jpg" alt="商品详情图">
<!-- 价格展示 -->
<div id="product-price">¥0.00</div>

JavaScript逻辑

// 获取DOM元素
const productItems = document.querySelectorAll('.product-item');
const detailImg = document.getElementById('product-detail-img');
const priceEl = document.getElementById('product-price');

// 绑定点击事件
productItems.forEach(item => {
  item.addEventListener('click', async () => {
    const productId = item.dataset.id;
    
    // 方式1：直接用预定义的图片路径（适合静态数据）
    // const imgPath = `/images/product-${productId}.jpg`;
    // detailImg.src = imgPath;
    // priceEl.textContent = productId === '1' ? '¥99.00' : '¥159.00';

    // 方式2：从后端接口获取商品数据（适合动态数据）
    try {
      const res = await fetch(`/api/products/${productId}`);
      const product = await res.json();
      detailImg.src = product.imgUrl;
      priceEl.textContent = `¥${product.price.toFixed(2)}`;
    } catch (err) {
      console.error('获取商品数据失败:', err);
    }
  });
});

二、Express后端静态资源配置（解决路径错误） #

你提到用Express路径出现错误，大概率是静态资源托管配置不正确，按以下步骤修正：

1. 整理文件结构：将所有图片放在项目根目录的public/images文件夹下，比如：

你的项目根目录
├── public
│   └── images
│       ├── product-1.jpg
│       ├── product-2.jpg
│       └── default.jpg
├── app.js
└── package.json

2. 配置Express静态资源托管：在app.js中添加以下代码，让Express能正确访问public文件夹下的静态文件：

const express = require('express');
const app = express();

// 关键：托管静态资源，public下的文件可通过根路径直接访问
app.use(express.static('public'));

// 可选：添加商品数据接口（对应前端方式2）
app.get('/api/products/:id', (req, res) => {
  // 模拟数据库中的商品数据，实际项目从数据库查询
  const productList = {
    '1': { price: 99, imgUrl: '/images/product-1.jpg' },
    '2': { price: 159, imgUrl: '/images/product-2.jpg' }
  };
  res.json(productList[req.params.id] || {});
});

app.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000');
});

三、常见路径错误排查 #

• 路径拼写问题：检查图片文件名的大小写（Linux服务器区分大小写）、后缀是否正确（比如.jpg写成.jpeg）
• 静态资源路径错误：如果图片放在public/assets/images，则访问路径应为/assets/images/product-1.jpg，同时确保express.static('public')配置正确
• 相对路径陷阱：不要用../images/product-1.jpg这类相对路径，直接用根路径开头的绝对路径（/images/xxx），避免页面路由变化导致路径失效

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