背景图片无法显示，是否与Node.js有关？

问题根源 #

你的Node.js服务器没处理图片资源的请求。浏览器加载CSS后，会发起coinflip.jpg的请求，但你的server.js里只配置了CSS文件的处理逻辑，没管图片，导致图片请求返回404，自然显示不出来。

修复方法 #

• 给server.js添加图片处理分支
  在现有的switch语句里加一段处理图片请求的代码，记得设置正确的响应头：

  switch (page) {
    case '/css/style.css':
          fs.readFile('css/style.css', function(err, data) {
            res.writeHead(200, {'Content-Type': 'text/css'});
            res.write(data);
            res.end();
          });
          break;
    // 新增图片请求处理
    case '/coinflip.jpg':
          fs.readFile('coinflip.jpg', function(err, data) {
            res.writeHead(200, {'Content-Type': 'image/jpeg'});
            res.write(data);
            res.end();
          });
          break;
    // 其他已有的页面/资源处理分支...
  }
  

  注：Content-Type必须对应资源类型，jpg用image/jpeg，png用image/png，这步不能少。

• 确认CSS路径正确性
  你原来写的url("../coinflip.jpg")是对的（style.css在css文件夹，上级目录就是图片所在的根目录），不用改；用绝对路径url("/coinflip.jpg")也可以，只要server能处理这个请求。

进阶优化 #

如果以后要加更多静态资源（JS、其他图片、字体等），别再手动写switch了，用Express的express.static中间件自动处理：

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

// 把项目根目录设为静态资源目录，自动处理所有静态文件请求
app.use(express.static(__dirname));

app.listen(3000, () => {
  console.log('服务器运行在3000端口');
});

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