使用Node.js、Express和EJS无法显示图片的问题求助

你遇到的这个问题太常见了——EJS页面加载后只显示图片的alt文本和占位图标，控制台还报GET /public/images/ResConnect.png 404错误，本质上要么是静态资源的托管配置没做好，要么是图片路径写多了不必要的前缀。下面给你一步步排查解决：

1. 先确认Express的静态资源托管配置 #

如果你用的是Express框架，服务器默认不知道public目录是静态资源的存放地，必须明确告诉它。打开你的项目入口文件（比如app.js或者server.js），一定要加上这行配置：

// 基础写法，假设public文件夹在项目根目录下
app.use(express.static('public'));

要是担心相对路径出问题，用绝对路径更稳妥：

const path = require('path');
// __dirname代表当前文件所在目录，确保public路径绝对正确
app.use(express.static(path.join(__dirname, 'public')));

没有这行配置的话，服务器收到/public/images/xxx的请求时，完全不知道去哪里找文件，直接返回404。

2. 修正EJS里的图片路径 #

当你配置好静态资源托管后，public就相当于静态资源的"根目录"了，所以在EJS里写图片路径时，千万不要加/public前缀！

比如你原来的代码可能是这样：

<img src="/public/images/ResConnect.png" alt="ResConnect Logo">

直接改成：

<img src="/images/ResConnect.png" alt="ResConnect Logo">

这样服务器收到/images/ResConnect.png的请求时，会自动去public/images/ResConnect.png匹配文件，完美对应。

3. 核对文件实际位置和文件名 #

最后再检查下你的项目结构是否正确，应该是这样的：

你的项目根目录
├── public
│   └── images
│       └── ResConnect.png （注意文件名大小写要和代码里完全一致！）
├── views
│   └── index.ejs
└── app.js

要是图片放错了文件夹，或者文件名大小写不匹配（比如实际是resconnect.png，你代码里写的是ResConnect.png），也会导致404，这点别忽略。

4. 别忘了重启服务器 #

修改了配置或者路径后，一定要重启你的Express服务器，不然新的配置不会生效哦！

按照这几步来，应该就能解决你的图片加载问题了，先从静态资源配置那步查起，这是最容易踩的坑。

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