使用Express+Pug搭建站点时CSS背景图片加载失败报错404

你的Express静态资源中间件配置方法错误，导致public目录下的所有静态资源（图片、CSS等）都无法被浏览器访问，这是出现404报错的根本原因。

app.set()是用于设置Express内置配置项的API，不能用来注册中间件，静态资源服务需要用app.use()注册才会生效。

• 替换index.js中的静态资源配置代码
  将原代码：

app.set(express.static,path.join(__dirname,'public'))

替换为：

app.use(express.static(path.join(__dirname, 'public')))

• 确认文件结构匹配
  确保public目录下的层级如下：

public/
├── images/
│   └── home_bg.jpeg  # 确认文件名、后缀拼写完全正确
└── css/
    └── home.css

• 调整CSS路径写法
  直接使用静态资源根路径的绝对路径即可，不受当前页面路由、CSS文件位置影响：

background-image: url("/images/home_bg.jpeg");

修改完成后重启Express服务，即可正常加载背景图片。

• 注意文件名大小写问题，Windows开发环境不区分大小写，但Linux部署环境会区分，需保证代码中路径写法和实际文件名大小写完全一致
• 确认图片文件没有损坏，且存放在上述对应路径中

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