PUG模板引擎中本地图片插入失败求助：图片无法加载

开发者阿泽

2026-5-25

Troubleshooting Pug Image Loading Issues

Hey there! Let's work through why your Pug image isn't showing up—this is a super common hiccup, so we'll get it sorted quickly. Here are the most likely fixes to try:

Add the image file extension to your src
You’ve written src='./login_icon' but images almost always have a file extension like .png, .jpg, or .svg. Pug doesn’t auto-complete these for you, so you need to include it explicitly. For example:
```
img(src='./login_icon.png', alt='login', style='width:100px;height:100px;')
```
Double-check what extension your actual image file uses and match it exactly.
Verify filename and path case sensitivity
If you’re on a Linux or macOS system, filenames are case-sensitive. Make sure the name in your Pug code matches the actual file’s name down to every letter (e.g., Login_Icon.png vs login_icon.png are treated as different files).
Check the compiled HTML output
Compile your Pug file to HTML and look at the generated <img> tag. Does the src attribute match what you expect? Sometimes Pug’s compilation context can shift relative paths, so confirming this will help you rule out path translation issues.
Ensure your server serves static files correctly
If you’re running a server (like Express for Node.js), you need to configure it to serve static assets from your directory. For example, in Express you’d add:
```
app.use(express.static(__dirname)); // Serves files from the current directory
```
Without this, your server might not be allowing access to the image file, even if the path looks right.
Test with an absolute path (for debugging)
As a quick test, try using the full absolute path to your image (e.g., src='/Users/yourname/project/login_icon.png' on macOS). If this works, it confirms the issue is with your relative path setup, and you can tweak the relative path accordingly.