React无法从本地Node.js服务器加载图片问题求助

核心问题是原生Node.js服务器未正确配置静态文件服务逻辑，调整文件夹结构后，服务器无法正确定位并返回Images文件夹内的图片资源，导致前端请求无有效响应，图片显示空白。

1. 修正Node.js服务器的静态文件处理逻辑 #

原生Node.js不会自动处理静态文件请求，需要手动编写路由逻辑来解析URL、读取文件并返回正确响应。以下是完整的服务器示例代码：

const http = require('http');
const fs = require('fs');
const path = require('path');
const url = require('url');

const server = http.createServer((req, res) => {
  const parsedUrl = url.parse(req.url);
  let pathname = parsedUrl.pathname;

  // 处理Images文件夹的请求
  if (pathname.startsWith('/Images/')) {
    // 拼接绝对文件路径，避免相对路径错误
    const filePath = path.join(__dirname, pathname);
    
    // 获取文件扩展名，设置正确的Content-Type
    const ext = path.extname(filePath);
    let contentType = 'text/plain';
    switch (ext) {
      case '.jpg':
      case '.jpeg':
        contentType = 'image/jpeg';
        break;
      case '.png':
        contentType = 'image/png';
        break;
      // 可根据需要添加其他图片格式
    }

    // 读取文件并返回响应
    fs.readFile(filePath, (err, data) => {
      if (err) {
        // 文件不存在时返回404
        res.writeHead(404, {'Content-Type': 'text/html'});
        return res.end('<h1>404 Not Found</h1>');
      }
      // 成功读取则返回图片数据
      res.writeHead(200, {'Content-Type': contentType});
      res.end(data);
    });
    return;
  }

  // 处理其他请求（比如首页等）
  res.writeHead(200, {'Content-Type': 'text/html'});
  res.end('<h1>Server Running</h1>');
});

server.listen(8080, () => {
  console.log('Server running on http://<MyIPAddress>:8080/');
});

2. 验证文件路径与请求状态 #

• 打开浏览器开发者工具（F12），切换到Network面板，刷新页面查看图片请求的状态码：
  • 如果是404：说明服务器找不到文件，检查path.join(__dirname, pathname)是否正确拼接了文件路径（可在服务器代码中添加console.log(filePath)打印路径验证）
  • 如果是200但图片仍空白：检查Content-Type是否设置正确，比如jpg文件是否返回image/jpeg

3. 额外优化建议 #

• 文件名避免使用空格，改用下划线（filler_image_1_w300.jpg）或连字符，减少URL编码问题
• 确保服务器所在机器的防火墙开放8080端口，且<MyIPAddress>是服务器的公网/局域网可访问IP
• 前端img标签可添加alt属性，方便调试时判断是否请求失败：

  <img 
    src="http://<MyIPAddress>:8080/Images/filler_image_1_w300.jpg" 
    id="image-one" 
    style={{width:'100%'}}
    alt="Filler Image 1"
  />
  

内容的提问来源于stack exchange，提问作者Rodion N.