动态图片路径在EJS模板中：解决src=""属性无法正确解析的问题

1. 问题描述与背景

在使用node.js配合express框架和ejs模板引擎开发web应用时，常见需求是将图片文件名存储在数据库中，然后在前端页面动态加载这些图片。通常，我们会从数据库获取图片文件名，并通过ejs将其注入到 标签的 src 属性中。例如，数据库中存储了 2022-07-16t13-40-30.352z104879.jpg 这样的文件名。

在Express服务器端，我们通常会设置静态文件服务来提供图片：

const express = require('express');
const path = require('path');
const router = express.Router();

// 假设图片存储在 public/images 和 uploads 目录下
router.use(express.static('./public'));
router.use(express.static(path.join(__dirname, './uploads')));

router.get('/img', (req, res, next) => {
    // 假设 Content.findById 成功获取到图片信息
    // 实际应用中，这里可能是从数据库查询图片名称
    const result = {
        img: [{ name: '2022-07-16T13-40-30.352Z104879.jpg' }]
    }; // 模拟数据库查询结果
    const nameOfImg = result.img[0].name;
    res.locals.name = nameOfImg; // 将图片名称传递给EJS模板
    res.render('createPage'); // 渲染EJS模板
});

在EJS模板 createPage.ejs 中，我们尝试使用以下方式加载图片：

@@##@@


@@##@@">

尽管 alert('') 或在页面上直接显示 能够正确输出图片文件名，但当其作为 src 属性值时，图片却无法加载。通过浏览器开发者工具的网络请求可以看到，当使用EJS动态注入时，浏览器发出的GET请求路径可能不正确，例如 /create/images/2022-07-16T13-40-30.352Z104879.jpg，而硬编码时则是正确的 /images/2022-07-16T13-40-30.352Z104879.jpg。这表明问题在于浏览器在解析相对路径 images/ 时，其基准URL可能受到了当前页面URL（例如 /create）的影响。

2. 解决方案一：客户端JavaScript动态赋值

为了避免服务器端渲染时相对路径解析的潜在歧义，一种稳健的方法是在客户端使用JavaScript动态地设置 标签的 src 属性。这种方法将图片的完整路径或文件名传递到前端，然后由JavaScript负责构建和赋值。

实现步骤：

1. 在EJS模板中，为 @@##@@

   %E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9%EF%BC%9A

   • %E8%B7%AF%E5%BE%84%E5%89%8D%E7%BC%80:%20%E5%9C%A8JavaScript%E4%B8%AD%E8%AE%BE%E7%BD%AE%20src%20%E6%97%B6%EF%BC%8C%E8%AF%B7%E7%A1%AE%E4%BF%9D%E8%B7%AF%E5%BE%84%E6%98%AF%E7%9B%B8%E5%AF%B9%E4%BA%8E%E7%BD%91%E7%AB%99%E6%A0%B9%E7%9B%AE%E5%BD%95%E7%9A%84%E7%BB%9D%E5%AF%B9%E8%B7%AF%E5%BE%84%EF%BC%88%E4%BE%8B%E5%A6%82%20/images/%EF%BC%89%EF%BC%8C%E6%88%96%E8%80%85%E6%98%AF%E4%B8%80%E4%B8%AA%E6%AD%A3%E7%A1%AE%E7%9A%84%E7%9B%B8%E5%AF%B9%E8%B7%AF%E5%BE%84%E3%80%82%E5%9C%A8%E4%B8%8A%E8%BF%B0%E7%A4%BA%E4%BE%8B%E4%B8%AD%EF%BC%8C/images/%20%E6%98%AF%E4%B8%80%E4%B8%AA%E7%9B%B8%E5%AF%B9%E4%BA%8E%E7%BD%91%E7%AB%99%E6%A0%B9%E7%9B%AE%E5%BD%95%E7%9A%84%E8%B7%AF%E5%BE%84%EF%BC%8C%E5%AE%83%E4%BC%9A%E6%AD%A3%E7%A1%AE%E5%9C%B0%E6%8C%87%E5%90%91%20express.static('./public')%20%E4%B8%AD%20public/images%20%E7%9B%AE%E5%BD%95%E4%B8%8B%E7%9A%84%E5%9B%BE%E7%89%87%E3%80%82%E5%A6%82%E6%9E%9C%20uploads%20%E7%9B%AE%E5%BD%95%E7%9B%B4%E6%8E%A5%E4%BD%9C%E4%B8%BA%E9%9D%99%E6%80%81%E6%9C%8D%E5%8A%A1%E6%A0%B9%E7%9B%AE%E5%BD%95%EF%BC%8C%E5%88%99%E5%8F%AF%E8%83%BD%E7%9B%B4%E6%8E%A5%E4%BD%BF%E7%94%A8%20imageElement.src%20=%20" imagename>
   • DOMContentLoaded: 确保在DOM完全加载后再执行JavaScript代码，以避免在元素尚未存在时尝试访问它。

   3. 解决方案二：验证服务器端静态文件服务与路径解析

   尽管客户端JavaScript方法更通用，但理解并正确配置服务器端静态文件服务是基础。如果EJS动态注入失败，很可能是因为浏览器在当前URL上下文下，无法正确解析相对路径。

   
   有道翻译AI助手
   有道翻译提供即时免费的中文、英语、日语、韩语、法语、德语、俄语、西班牙语、葡萄牙语、越南语、印尼语、意大利语、荷兰语、泰语全文翻译、网页翻译、文档翻译、PDF翻
   下载

   检查要点：

   1. express.static 配置: 确保你的静态文件服务配置正确，并且图片所在的目录能够被访问。

      // 假设图片在项目根目录下的 'public/images' 和 'uploads'
      // 这意味着通过 /images/your_image.jpg 可以访问 public/images/your_image.jpg
      // 并且通过 /your_image.jpg 可以访问 uploads/your_image.jpg (如果 uploads 目录直接作为根路径)
      router.use(express.static('./public')); // 优先匹配 public 目录
      router.use(express.static(path.join(__dirname, './uploads'))); // 然后匹配 uploads 目录

      如果图片在 uploads 目录下，并且你希望通过 /uploads/your_image.jpg 访问，那么配置应该是：

      router.use('/uploads', express.static(path.join(__dirname, './uploads')));

      这样，你的EJS src 就可以写成 src="/uploads/"。

   2. 浏览器开发者工具: 当图片加载失败时，打开浏览器的开发者工具（通常按F12），切换到“网络”（Network）选项卡。

      • 查看失败的GET请求。
      • 检查请求的URL是否符合预期。例如，如果你的页面URL是 http://localhost:3000/create，而 的 src 是 images/，浏览器可能会尝试请求 http://localhost:3000/create/images/your_image.jpg。如果你的静态文件服务没有配置 /create/images 路径，就会失败。
      • 硬编码 src="/images/..." 能够工作，通常是因为 /images/ 是一个相对于网站根目录的绝对路径，浏览器不会受当前页面URL的影响。

   3. EJS中的路径: 如果 express.static 配置为直接将 uploads 目录的内容暴露在根路径下，那么在EJS中直接使用 src="/" 可能会成功。但为了更好的组织，通常会给静态资源一个前缀，如 src="/images/"，这就要求 express.static 的配置能够匹配。

      示例： 如果你的图片文件 2022-07-16T13-40-30.352Z104879.jpg 位于 项目根目录/uploads 文件夹中，并且你希望通过 /images/ 路径访问它，那么你需要将 uploads 目录映射到 /images 路径下：

      router.use('/images', express.static(path.join(__dirname, './uploads')));

      这样， 标签就可以使用 src="/images/"。

   4. 总结与最佳实践

   解决EJS动态图片路径问题的关键在于理解服务器端静态文件服务配置和浏览器如何解析相对路径。

• 客户端JavaScript动态赋值是一种非常可靠的方法，它将路径构建逻辑放在客户端，避免了服务器端渲染时相对路径解析可能带来的混淆。
• 仔细检查express.static的配置以及其与EJS中src属性值的匹配关系至关重要。确保静态文件服务能够正确地将请求的URL映射到实际的图片文件路径。
• 使用浏览器开发者工具进行调试是定位此类问题的最有效手段。通过查看网络请求，可以清晰地看到浏览器实际尝试请求的URL，从而判断是路径配置问题还是其他问题。
• 推荐使用绝对路径（以 / 开头）来引用静态资源，例如 /images/your_image.jpg，这样可以避免因当前页面URL变化而导致的相对路径解析错误。

通过上述方法，您可以有效地解决EJS模板中动态图片路径解析失败的问题，确保图片能够正确地在Web页面上显示。