EJS动态图片路径src加载问题解决

本文针对EJS模板引擎中动态设置``标签src属性时，图片路径解析失败的问题，提供了详尽的解决方案。当直接将数据库中的图片名称通过EJS变量注入src属性时，常出现图片无法显示的情况。文章深入分析了浏览器解析相对路径的机制，并提出了两种有效的解决策略：一是推荐使用客户端JavaScript动态设置src属性，避免服务器端渲染时的路径歧义，确保图片资源加载的灵活性和准确性；二是强调验证并正确配置服务器端的静态文件服务，特别是`express.static`的设置，确保图片资源能够被正确访问。通过检查请求URL，理解EJS中的路径配置，并结合浏览器开发者工具进行调试，可以有效解决此类问题，提升Web应用的稳定性和用户体验。

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 中，我们尝试使用以下方式加载图片：

<!-- 这种硬编码方式可以正常显示图片 -->
<img src="images/2022-07-16T13-40-30.352Z104879.jpg">

<!-- 这种动态注入方式却无法显示图片 -->
<img src="images/<%= name %>">

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

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

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

实现步骤：

1. 在EJS模板中，为 标签设置一个唯一的 id，并可以预留一个空的 src 属性。
2. 将图片文件名（或完整路径）作为数据属性（data-*）或隐藏字段传递给前端，或者直接在EJS中渲染一个JavaScript变量。
3. 在页面加载完成后，使用JavaScript获取该 元素，并动态设置其 src 属性。

EJS模板 (createPage.ejs) 修改：

<!-- 准备一个带有ID的img标签 -->
<img id="dynamicImage" src="">

<!-- 也可以将图片名称作为JS变量在脚本块中传递 -->
<script>
    const imageName = "<%= name %>"; // EJS变量在服务器端渲染时被替换
    document.addEventListener('DOMContentLoaded', () => {
        const imageElement = document.getElementById("dynamicImage");
        if (imageElement && imageName) {
            // 假设图片在 /images/ 目录下
            imageElement.src = "/images/" + imageName;
            // 或者如果express.static配置为直接访问uploads目录，则可以是：
            // imageElement.src = "/" + imageName;
        }
    });
</script>

注意事项：

• 路径前缀: 在JavaScript中设置 src 时，请确保路径是相对于网站根目录的绝对路径（例如 /images/），或者是一个正确的相对路径。在上述示例中，/images/ 是一个相对于网站根目录的路径，它会正确地指向 express.static('./public') 中 public/images 目录下的图片。如果 uploads 目录直接作为静态服务根目录，则可能直接使用 imageElement.src = "/" + imageName;。
• DOMContentLoaded: 确保在DOM完全加载后再执行JavaScript代码，以避免在元素尚未存在时尝试访问它。

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

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

检查要点：

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/<%= name %>"。

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

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

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

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

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

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

4. 总结与最佳实践

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

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

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

终于介绍完啦！小伙伴们，这篇关于《EJS动态图片路径src加载问题解决》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！