Node.js Express按参数返回不同HTML页面时图片无法加载问题求助

算力阿峰

2026-9-23

问题根因

当前Express服务仅配置了/:id动态路由用于返回HTML文件，没有针对图片这类静态资源的请求处理逻辑
本地直接打开HTML文件时用的是file://协议，相对路径可以直接定位到同目录的图片；部署到服务器后，浏览器会根据当前页面域名拼接图片路径（例如访问http://localhost:8080/screen=1时，会请求http://localhost:8080/image1.jpg），服务端无法响应这类请求导致图片加载失败

解决方案

步骤1：配置静态资源托管中间件

Express内置了express.static中间件，专门用于托管图片、样式表这类静态资源，直接在服务端路由前添加对应配置即可：

修改后的完整服务端代码如下：

var express = require('express');
var app = express();
const fs = require("fs");

// 新增静态资源托管配置，__dirname为当前服务端代码所在目录，会自动响应该目录下所有静态文件的请求
app.use(express.static(__dirname));
  
function readAndServe(path, res) {
    fs.readFile(path, function (err, data) {
        // 新增响应头声明，避免浏览器把HTML内容识别为普通文本
        res.setHeader('Content-Type', 'text/html');
        res.end(data);
    })
}
  
app.get('/:id', function (req, res) {
    console.log(req.params);
    if (req.params.id == "screen=1")
        readAndServe("./1.html", res);
    else if (req.params.id == "screen=2")
        readAndServe("./2.html", res);
    else if (req.params.id == "screen=3")
        readAndServe("./3.html", res);
    else {
        res.end("Invalid request");
    }
});
  
app.listen(8080, () => { console.log("Server Listening on Port 8080") });