Node.js中Pug模板图片加载失败求助：CSS正常仅图片链接失效

Hey there, let's figure out why your images aren't loading in your Pug template while CSS works just fine—especially since you confirmed the same paths work in plain HTML/CSS. Here are the most likely fixes to check step by step:

1. Verify Your Express Static Resource Middleware Setup #

The #1 culprit here is usually a missing or misconfigured express.static middleware, which tells Express where to serve static files (like images, CSS, JS) from.

First, make sure you've added this line to your index.js before your route definitions (order matters! Routes will override static file requests if placed first):

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

// This line must come BEFORE your app.get('/') route
app.use(express.static('public'));

app.set('view engine', 'pug');

app.get('/', (req, res) => {
  res.render('home');
});

app.listen(3000, () => {
  console.log('Server up on port 3000');
});

If your static assets are in a folder with a different name (like assets instead of public), update the express.static argument to match that folder name.

2. Use Absolute Paths for Images in Pug #

Even if your plain HTML uses relative paths successfully, Pug can behave differently depending on your route structure. Always use absolute paths (starting with /) for images to avoid context-related errors:

// ✅ Correct: Absolute path points directly to your static folder's images directory
img(src="/images/your-image.jpg" alt="Description of your image")

// ❌ Risky: Relative paths might break if you add nested routes later
img(src="images/your-image.jpg" alt="Description of your image")

This ensures the browser always looks for the image at http://your-domain/images/your-image.jpg, which maps to your public/images/your-image.jpg file (when express.static('public') is set).

3. Cross-Check Folder Structure vs. Requested Paths #

Double-check that your folder structure matches what you're requesting. For example, if your project looks like this:

your-project/
├── public/
│   ├── images/
│   │   └── my-photo.jpg
│   └── css/
│       └── style.css
├── views/
│   └── home.pug
└── index.js

Then your Pug image tag should be img(src="/images/my-photo.jpg"), and your CSS link should be link(rel="stylesheet", href="/css/style.css")—this matches how your plain HTML works.

4. Inspect Browser Network Requests #

Open your browser's DevTools (F12), go to the Network tab, and refresh the page. Look for your image file:

• If it shows a 404 status: The URL the browser is requesting doesn't match where your image is stored. Double-check the path in your Pug file and your static folder structure.
• If it doesn't show up at all: There might be a typo in your Pug image tag, or the file name has a capitalization mismatch (e.g., MyPhoto.jpg vs myphoto.jpg—Linux/macOS filesystems are case-sensitive!).

Since your plain HTML setup works, the issue is almost certainly tied to how Express is serving static files or how Pug is generating the image paths. Walk through these steps, and you should have those images loading in no time!

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