VSCode开发localhost网站：仅运行app.js无法加载图片的解决咨询

1. 配置静态资源托管 #

假设你使用Express框架开发，首先要确保app.js里正确配置了静态文件托管逻辑。如果图片存放在website/public/images这类目录下，需要在app.js中添加以下代码：

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

// 托管public目录下的静态资源，该目录内的文件可通过根路径直接访问
app.use(express.static('public'));

// 其他路由、模板引擎配置等代码...

配置后Node.js服务会自动处理静态资源请求，和VSCode是否打开Pug文件完全无关。

2. 修正Pug模板的图片路径 #

检查home.pug和contact.pug里的图片引用，必须使用绝对路径而非相对路径：

// 正确写法（对应public/images/avatar.jpg）
img(src="/images/avatar.jpg" alt="用户头像")

// 避免这类相对路径，容易导致路由切换或服务启动状态下的路径解析错误
img(src="../images/avatar.jpg" alt="用户头像")

绝对路径基于服务根目录（website文件夹）查找资源，不会受VSCode打开文件状态影响。

3. 核对文件目录结构 #

确保你的文件层级符合规范，示例结构如下：

website/
├── app.js
├── public/
│   └── images/
│       └── avatar.jpg
└── views/
    ├── home.pug
    └── contact.pug

如果图片不在你配置的静态资源目录内，服务端无法直接读取，自然无法加载显示。

4. 重启Node.js服务 #

修改app.js或配置后，一定要重启你的Node.js服务，让新的静态资源配置生效。

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