使用Handlebars开发个人作品集时CSS与图片资源加载404错误问询

你的问题核心是Express静态资源路由配置和实际资源路径不匹配：

• 你将css、images文件夹单独放在根目录，但仅配置了app.use(express.static('images'))，该配置会把images文件夹下的内容直接挂载到服务根路径，因此访问图片的正确路径应为/resize_profile_pic.jpg，而非你写的/images/resize_profile_pic.jpg
• css文件夹没有配置任何静态资源路由，服务无法识别css文件的访问请求
• 你写的app.use("/public", express.static(path.join(__dirname, "public")))要求静态资源必须放在根目录的public文件夹下才会被识别，但你并没有把css、images放入该目录，该配置无效
• 其余的重复view engine配置、多余的router对象、无用的/static路由虽然不直接导致404，但属于冗余代码。

推荐你先调整为通用的项目结构，统一管理静态资源，避免后续配置混乱：

1. 调整目录结构 #

将所有静态资源放入根目录的public文件夹下，最终结构如下：

项目根目录
├── index.js
├── views/
│   ├── layouts/
│   │   └── layout.hbs
│   ├── partials/
│   └── index.hbs
└── public/
    ├── css/
    │   └── style.css
    └── images/
        └── resize_profile_pic.jpg

2. 修改index.js配置 #

清理冗余代码，修正静态资源配置：

// === 引入依赖 === //
var express = require('express');
var app = express();
var handlebars = require("express-handlebars");
var path = require("path");

//===== 模板引擎配置 =====//
app.engine(
    "hbs",
    handlebars({
      layoutsDir: path.join(__dirname, "views/layouts"),
      partialsDir: path.join(__dirname, "views/partials"), 
      extname: ".hbs", 
      defaultLayout: "layout" 
    })
);
app.set("views", path.join(__dirname, "views")); 
app.set("view engine", "hbs");

// 静态资源配置：public目录下的所有资源可直接通过路径访问
app.use(express.static(path.join(__dirname, "public")));

//===== 页面路由 =====//
app.get('/', (req, res) => {
    res.render('index', {title: 'Home Page', css:['style.css']});
});

app.listen(3000, () => {
    console.log('服务已启动，访问地址：http://localhost:3000');
});

3. 修改模板内的资源引用 #

在layout.hbs中引入css的代码改为：

<link rel="stylesheet" href="/css/style.css">

在index.hbs中引入图片的代码改为：

<img src="/images/resize_profile_pic.jpg" alt="">

修改完成后重启服务即可正常加载资源。

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