React+NodeJS项目中从SQLite读取的用户头像无法加载

核心问题在于：数据库存储的是本地绝对文件路径（比如C:\Users\abc\Desktop\abc\server\uploads\mountain.jpg），前端直接将该路径赋值给<img>的src属性时，浏览器出于安全限制，不允许网页直接访问本地文件系统路径，导致图片无法显示。

需要从三个维度调整代码：

1. 后端将uploads目录设为静态资源目录，允许前端通过HTTP请求访问图片
2. 数据库存储图片的相对路径（而非本地绝对路径）
3. 前端拼接完整的HTTP URL作为图片地址

1. 修改后端server.js代码 #

步骤1：添加静态资源托管 #

在server.js中引入express后，添加以下代码，将uploads目录暴露为可访问的静态资源：

// 暴露uploads目录为静态资源，前端可通过http://localhost:5000/uploads/xxx.jpg访问
app.use('/uploads', express.static(path.join(__dirname, 'uploads')));

步骤2：优化multer文件名规则（避免同名文件覆盖） #

原配置直接使用原文件名，易导致同名文件被覆盖，建议给文件名添加时间戳生成唯一标识：

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, path.join(__dirname, 'uploads'));
  },
  filename: function (req, file, cb) {
    const ext = path.extname(file.originalname);
    // 生成唯一文件名：时间戳+原文件名
    const uniqueFilename = `${Date.now()}-${file.originalname}`;
    cb(null, uniqueFilename);
  }
});

步骤3：存储相对路径到数据库 #

修改上传接口，将相对路径（/uploads/文件名）存入数据库，而非本地绝对路径：

app.post("/upload-profile-picture", upload.single("profilePicture"), (req, res) => {
  if (!req.file) {
    return res.status(400).send("No file uploaded.");
  }

  // 存储相对路径，而非本地绝对路径
  const profilePictureRelativePath = `/uploads/${req.file.filename}`;

  const { email } = req.body;

  db.run(`UPDATE credentials SET picture = ? WHERE email = ?`, [profilePictureRelativePath, email], function(err) {
    if (err) {
      console.error(err.message);
      return res.status(500).send("An error occurred while updating profile picture.");
    }

    console.log("Profile picture updated successfully.");
    res.send({ success: true, message: "Profile picture updated successfully." });
  });
});

2. 修改React前端代码 #

前端获取到相对路径后，拼接成完整的HTTP URL，赋值给<img>的src：

const ProfilePage = () => {
  // ... 原有代码不变

  const fetchProfilePicture = async () => {
    try {
      const response = await axios.get(`http://localhost:5000/get-profile-picture?email=${user.email}`);
      const profilePicturePath = response.data.profilePicture;
      // 拼接完整的图片访问URL
      const fullImageUrl = `http://localhost:5000${profilePicturePath}`;
      setProfilePicture(fullImageUrl);
    } catch (error) {
      console.error("Error fetching profile picture:", error);
    }
  };

  // ... 其余代码不变
};

额外注意事项 #

• 确保uploads目录存在，若不存在可在启动服务器时自动创建：

  const fs = require('fs');
  const uploadsDir = path.join(__dirname, 'uploads');
  if (!fs.existsSync(uploadsDir)) {
    fs.mkdirSync(uploadsDir);
  }
  

• 生产环境部署时，不要硬写http://localhost:5000，建议用环境变量配置后端地址。

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