Node.js与Express服务网页时图片加载失败（404）问题求助

嘿，我之前也踩过这个一模一样的坑！让我帮你拆解一下问题到底出在哪，以及怎么快速解决：

核心问题：静态目录配置不对 #

你用了app.use(express.static('public'))，但你的图片根本不在public文件夹里啊！这个配置是告诉Express：“所有静态资源（图片、CSS、JS）都去public目录里找”，但你的图片和HTML、app.js在同一目录，所以Express自然找不到它，返回404。

两种解决方法，选一个适合你的： #

方法1：直接把当前目录设为静态资源目录 #

如果不想改文件结构，就把静态目录配置改成当前脚本所在的绝对路径（用__dirname），这样Express就能扫描根目录下的所有静态文件了：

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

// 关键：用__dirname指定当前目录为静态资源目录
app.use(express.static(__dirname));

// 返回你的HTML页面
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'index.html'));
});

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

然后HTML里的图片引用用绝对路径（前面加斜杠，避免路由嵌套时的相对路径问题）：

<img src="/stockMarketPhoto.jpg" alt="Stock Market">

方法2：用规范的public目录结构（推荐） #

更专业的做法是把所有静态资源都放到public文件夹里，这样项目结构更清晰：

调整你的文件结构成这样：

你的项目文件夹/
├─ app.js
└─ public/
   ├─ index.html
   └─ stockMarketPhoto.jpg

然后app.js的配置改成：

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

// 指向public目录作为静态资源根目录
app.use(express.static('public'));

// 返回public里的index.html
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

HTML里的图片引用还是用绝对路径：

<img src="/stockMarketPhoto.jpg" alt="Stock Market">

额外检查点 #

• 确认图片文件名大小写完全正确！Linux/macOS系统对文件名大小写敏感，StockMarketPhoto.jpg和stockMarketPhoto.jpg会被当成两个不同的文件。
• 测试一下能不能直接访问图片：启动服务器后，在浏览器地址栏输入http://localhost:3000/stockMarketPhoto.jpg，如果能打开图片，说明静态目录配置没问题，只是HTML里的引用路径有问题。

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