Node.js Express+HBS网页图片加载失败（404错误）求助

核心问题分析 #

从报错GET http://localhost:3000/tempelates/P2.jpg 404 (Not Found)可定位两个关键问题：

1. 路径拼写错误：tempelates应为templates（少写了一个s）
2. 资源目录配置错误：你试图从模板目录（templates）请求图片，但Express默认不会将模板目录作为静态资源目录开放——模板目录仅用于服务器端渲染，不能直接被前端请求访问。

具体修复步骤 #

1. 调整项目文件结构 #

将图片移至专门的静态资源目录，比如public/images下，标准项目结构示例：

你的项目/
├── public/
│   └── images/
│       ├── P1.jpg
│       ├── P2.jpg
│       └── P3.jpg
├── templates/  # 你的HBS模板目录
│   └── index.hbs
├── app.js
└── package.json

2. 配置Express静态资源目录 #

在Express后端代码中添加express.static中间件，指定静态资源目录为public：

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

// 设置HBS模板引擎及自定义模板目录（如果你的模板目录是templates而非默认views）
app.set('view engine', 'hbs');
app.set('views', path.join(__dirname, 'templates'));

// 关键：开放public文件夹作为静态资源目录
app.use(express.static(path.join(__dirname, 'public')));

// 路由逻辑
app.get('/', (req, res) => {
  res.render('index');
});

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

3. 修改HBS模板中的图片路径 #

使用绝对路径（以/开头）引用静态资源，避免相对路径导致的错误：

<!-- 错误写法：相对模板目录的路径 -->
<!-- <img src="P1.jpg"> 或 <img src="./P1.jpg"> -->

<!-- 正确写法：指向public/images下的资源 -->
<img src="/images/P1.jpg" alt="图片1">
<img src="/images/P2.jpg" alt="图片2">
<img src="/images/P3.jpg" alt="图片3">

额外注意事项 #

• 确保图片文件名和路径大小写一致（比如P2.jpg不是p2.jpg），Windows系统不区分大小写，但Linux/macOS会严格区分。
• 不要将静态资源放在模板目录（templates）下，模板文件仅用于服务器渲染，不应直接暴露给前端请求。

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