React客户端无法通过MongoDB存储路径加载服务端文件夹内图片问题

数据老陈

2026-10-2

问题原因与修复方案

存在的3个核心问题

拼写错误：img标签的src属性中将localhost误写为locallhost，多了1个字母l，导致域名无法正确解析
静态路由不匹配：服务端配置的静态资源访问路由前缀为/api/addedItems，但前端拼接路径时未携带/api前缀，访问路径和服务端路由无法对应
路径分隔符不兼容：数据库中存储的filePath使用Windows系统的反斜杠\作为路径分隔符，浏览器URL标准要求使用正斜杠/，反斜杠会导致URL无法被正常识别

修复代码

修正Item组件代码

export default function Item({ id, filePath, type, productType }) {
  // 处理路径：替换反斜杠为正斜杠，拼接正确的路由前缀
  const imgUrl = `http://localhost:8080/api/${filePath.replace(/\\/g, '/')}`
  return (
    <div className="item">
      {imgUrl}
      <img
        src={imgUrl}
        className="item-image"
        alt="item-img"
      />
      {/*<span>{type}</span>*/}
      <span>{productType}</span>
      <button>Delete from closet</button>
    </div>
  );
}