Express.js + EJS项目图片路径配置问题求助

核心原因 #

浏览器请求图片时，是基于当前页面的URL路径，而非服务器上EJS文件的物理路径。你之前用的相对路径会被浏览器错误解析，而且Express默认不会对外暴露静态文件，必须先配置静态资源中间件。

正确步骤 #

1. 配置Express静态资源中间件 #

在server.js中添加以下代码，让Express能处理静态文件请求：

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

// 假设你的images文件夹在项目根目录下，直接将其设为静态资源目录
app.use(express.static('images'));

// 如果你后续把静态资源统一放在public目录下（更规范的做法），比如public/images，就改成：
// app.use(express.static('public'));

2. EJS中正确引用图片 #

• 如果是直接把images设为静态目录：
  在views/main/index.ejs里用绝对路径引用：

  <img src="/image.png" alt="示例图片">
  

• 如果是用public作为静态目录（推荐）：
  先把images文件夹移到public目录下（结构变成public/images/image.png），然后EJS里引用：

  <img src="/images/image.png" alt="示例图片">
  

为什么之前的路径不行？ #

比如你的路由是/main，页面URL是http://localhost:3000/main，你用的../images/image.png会被浏览器解析成http://localhost:3000/images/image.png，但此时Express没有配置静态资源目录，无法响应这个请求，所以图片加载失败。配置静态资源中间件后，Express才会把对应目录下的文件返回给浏览器。

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