Express Node项目中已上传图片无法显示问题求助

问题原因 #

当前页面路由为/users/display，模板里图片的src使用了仅含文件名的相对路径，浏览器会自动将其拼接在当前路由路径后，导致请求地址变成/users/1670147053485apic.jpg，而实际图片存放在public/images/目录下，因此返回404错误。

解决方案 #

1. 确认静态文件服务配置 #

确保Express主文件（如app.js）中已配置静态文件服务，让Express能正确识别public目录下的资源：

// app.js 中添加
const express = require('express');
const app = express();

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

2. 修改模板中的图片路径 #

将模板里的图片src改为根路径开头的绝对路径，把数据库存储的文件名拼接在/images/之后：

<td><img src="/images/{{this.Image}}"></td>

这样浏览器会直接请求/images/1670147053485apic.jpg，对应服务器上的public/images/1670147053485apic.jpg文件，即可正常加载图片。

3. 验证数据库存储内容 #

确认数据库的Image字段仅存储图片文件名（如1670147053485apic.jpg），而非包含相对路径的字符串。若之前存储的是带路径的内容，需调整数据或修改模板的路径拼接逻辑。

内容的提问来源于stack exchange，提问作者Arun K