问题描述与背景
在web开发中，我们常常需要将图片文件名存储在数据库中，然后在前端页面上动态展示这些图片。当使用ejs（embedded javascript）作为模板引擎，并结合express框架处理静态文件时，可能会遇到一个常见的问题：尽管ejs变量能够正确地渲染出图片的文件名，但html的标签却无法加载对应的图片，通常表现为图片破损图标或浏览器控制台中的404错误。
例如，服务器端代码可能如下所示，它从数据库中获取图片名称并将其传递给EJS模板：
const express = require('express');
const router = express.Router();
const path = require('path');
const Content = require('./models/Content'); // 假设的Mongoose模型
// 配置静态文件服务
router.use(express.static('./public')); // 假设公共静态文件在public目录
router.use(express.static(path.join(__dirname, './uploads'))); // 假设图片上传到uploads目录
router.get('/img', (req, res, next) => {
Content.findById('62d2bfce53f33f2eed033fba') // 示例ID
.then(result => {
const nameOfImg = result.img[0].name; // 从数据库获取图片文件名
res.locals['name'] = nameOfImg; // 将文件名传递给EJS
res.render('createPage'); // 渲染EJS模板
})
.catch(err => console.log(err));
});在EJS模板中，如果直接使用硬编码的路径，图片可以正常显示：
@@##@@
然而，当尝试使用EJS变量动态填充src属性时，图片却无法加载：
@@##@@">
尽管通过调试确认 变量的值是正确的，但浏览器仍无法找到图片资源。这表明问题不在于EJS变量本身，而在于浏览器如何解析动态生成的图片路径。
立即学习“前端免费学习笔记（深入）”；
问题根源：路径解析的差异
此问题的核心在于浏览器对src属性的路径解析方式，以及Express静态文件服务配置之间的不匹配。
-
浏览器相对路径解析： 当浏览器加载一个HTML页面时，它会根据当前页面的URL来解析所有相对路径的资源。如果你的页面是通过 /img 路由访问的（例如 http://localhost:3000/img），那么当
标签的src属性是 images/some-image.jpg 时，浏览器会尝试请求 http://localhost:3000/img/images/some-image.jpg。 -
Express静态文件服务： express.static() 中配置的路径是相对于服务器根目录的。在上述示例中：
- router.use(express.static('./public')) 意味着 public 目录下的文件可以直接通过 / 访问（例如 public/style.css 对应 /style.css）。
- router.use(express.static(path.join(__dirname, './uploads'))) 同样意味着 uploads 目录下的文件可以直接通过 / 访问（例如 uploads/image.jpg 对应 /image.jpg）。
- 如果 uploads 目录中包含一个 images 子目录，且图片在 uploads/images/some-image.jpg，那么它应该通过 /images/some-image.jpg 访问。
问题在于，当EJS模板通过 /img 路由渲染时，src="images/" 会被浏览器解析为相对于 /img 的路径，即 /img/images/。而服务器可能只在根路径 / 下提供了 /images/ 或直接提供了 /。这种路径不匹配导致了404错误。
解决方案
针对上述问题，有两种主要的解决方案，各有优缺点。
方法一：客户端JavaScript动态设置 src (推荐)
这种方法将图片路径的构建和赋值操作从服务器端转移到客户端，从而避免了EJS渲染时的相对路径解析问题。
EJS模板修改： 在EJS模板中，渲染一个带有唯一ID的
@@##@@" alt="Dynamic Image">
%E5%AE%A2%E6%88%B7%E7%AB%AFJavaScript%E4%BB%A3%E7%A0%81%EF%BC%9A%0A%E5%9C%A8%E9%A1%B5%E9%9D%A2%E5%8A%A0%E8%BD%BD%E5%AE%8C%E6%88%90%E5%90%8E%EF%BC%8C%E4%BD%BF%E7%94%A8JavaScript%E8%8E%B7%E5%8F%96
%E5%85%83%E7%B4%A0%EF%BC%8C%E5%B9%B6%E4%BB%8E%E5%85%B6data-%E5%B1%9E%E6%80%A7%E4%B8%AD%E8%AF%BB%E5%8F%96%E5%9B%BE%E7%89%87%E6%96%87%E4%BB%B6%E5%90%8D%EF%BC%8C%E7%84%B6%E5%90%8E%E6%9E%84%E5%BB%BA%E6%AD%A3%E7%A1%AE%E7%9A%84%E5%9B%BE%E7%89%87URL%E5%B9%B6%E8%B5%8B%E5%80%BC%E7%BB%99src%E5%B1%9E%E6%80%A7%E3%80%82
// 在
