MERN电商项目商品详情页图片加载404问题求助

核心原因 #

控制台报错的请求路径是http://localhost:3000/product/uploads/xxx.jpg，说明：

• 前端在/product/:id路由下使用了相对路径加载图片，浏览器自动拼接当前路由前缀，导致路径错误
• 后端静态资源托管路径与前端请求路径不匹配

解决方案 #

1. 修复前端图片路径 #

当前代码直接用src={image}，在/product路由下会被解析为相对路径，需改为绝对路径指向根目录的uploads文件夹：

修改轮播大图代码：

{product.productImage.map((image, index) => {
  // 统一拼接为根目录下的uploads路径
  const imgSrc = `/uploads/${image}`;
  return (
    <Slide index={index} key={index}>
      <ImageWithZoom
        className='d-block w-100 product-card-image'
        src={imgSrc}
      />
    </Slide>
  );
})}

轮播小图同步修改：

{product.productImage.map((image, index) => {
  const imgSrc = `/uploads/${image}`;
  return (
    <Dot slide={index} key={index}>
      <Image className='d-block w-100 product-card-image' src={imgSrc} />
    </Dot>
  );
})}

2. 确认后端静态资源托管配置 #

确保Express后端正确托管uploads文件夹，添加以下代码（根据项目目录结构调整路径）：

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

// 允许通过 /uploads 路径访问文件夹内的静态资源
app.use('/uploads', express.static(path.join(__dirname, 'uploads')));

3. 检查数据库存储路径 #

确认MongoDB中productImage字段存储的是纯文件名（如Screenshot(11).png-1657912296432.jpg），如果存储的是uploads/xxx.jpg这类相对路径，前端只需在路径前加/：

const imgSrc = `/${image}`;

验证 #

修改完成后重启前后端服务，访问商品详情页，检查控制台是否还有404错误，图片是否正常加载。

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