如何通过Node.js+Express发送包含本地图片的HTML页面？

你的问题出在没有配置静态文件服务：当前代码里的全局app.use会处理所有请求，包括浏览器加载test.png的请求，这时候返回的还是那段HTML，不是图片文件，自然加载失败。

按以下步骤修复：

1. 创建静态资源目录
   在项目根目录下新建一个public文件夹，把test.png放到这个文件夹里。

2. 配置Express静态文件中间件
   在你的代码里添加express.static中间件，用来处理静态资源请求，要放在路由处理之前：

3. 修改路由匹配规则
   把全局的app.use改成针对根路径的app.get("/")，避免拦截静态资源请求。

完整代码示例：

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

// 配置静态文件服务，指定public目录为静态资源根目录
app.use(express.static("public"));

// 仅处理根路径的请求，返回HTML
app.get("/", (req, res) => {
  res.send(`<body><img src='test.png'></body>`);
});

// 启动服务器
app.listen(3000, () => {
  console.log("服务器运行在 http://localhost:3000");
});

关键说明 #

• express.static("public")：告诉Express，当收到静态资源（图片、CSS、JS等）请求时，自动去public目录查找对应文件并返回。
• 静态中间件必须放在路由前面，这样请求会先匹配静态资源，再走业务路由。
• 如果图片放在public的子目录（比如public/images），则img的src要改成'images/test.png'。

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