今天是鐵人賽 Day26，目標是讓前端商品圖片能正常顯示，並完成首頁索引標籤（Title + Favicon）更新，提升使用者瀏覽體驗。

1️⃣ 前端商品圖片顯示修正
修改 Home.jsx，確保商品圖片路徑正確，只加一次 /uploads/
測試結果：所有商品卡片圖片能正確顯示，前端顯示正常

{p.images && p.images.length > 0 ? (
  <img
    src={`${BASE_URL}/uploads/${p.images[0]}`} // ✅ 只加一次 uploads/
    alt={p.name}
    className="w-full h-48 object-cover rounded-t-lg"
  />
) : (
  <div
    className="w-full h-48 flex items-center justify-center rounded-t-lg"
    style={{ backgroundColor: "#D1D3D4", color: "#333" }}
  >
    無圖片
  </div>
)}

2️⃣ 後端圖片資源設定與路徑修正
index.js 設定 /uploads 為靜態資源，允許跨域存取
新增路由自動修正前端傳錯的圖片路徑（例如 uploads/uploads/xxx.jpg）
測試結果：前端可以直接透過 http://localhost:3000/uploads/xxx.jpg 取得圖片

app.use(
  '/uploads',
  express.static(uploadPath, {
    setHeaders: (res) => {
      res.setHeader('Access-Control-Allow-Origin', '*');
    },
  })
);

app.get('/api/products/images/:imageName', (req, res) => {
  const imageName = req.params.imageName.replace(/^uploads\//, '');
  const filePath = path.join(uploadPath, imageName);

  if (fs.existsSync(filePath)) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.sendFile(filePath);
  } else {
    res.status(404).send('圖片不存在');
  }
});

3️⃣ 首頁索引標籤與圖示更新
將 改為 Ironman Store
將 favicon 換成專案自訂圖示（放在 public 目錄下）
清除瀏覽器快取後成功更新 Tab 小圖示

<title>Ironman Store</title>
<link rel="icon" type="image/png" href="/ironman-icon.png" />

4️⃣ 測試流程
前端首頁與商品列表確認圖片能正確顯示
無圖片商品顯示預設區塊
Tab 標題與小圖示正確更新

💡 Day26 收穫

• 前端商品圖片成功顯示
• 後端 /uploads 靜態資源與路徑自動修正完成
• 網站索引標籤（Title + Favicon）更新完成
• 使用者瀏覽體驗提升，前後端整合穩定