本文旨在解决在使用EJS模板引擎动态设置HTML 标签的 src 属性时遇到的路径解析问题。当直接将数据库中存储的图片名称通过EJS变量注入到 src 属性时，图片可能无法显示。文章将深入探讨问题根源，并提供两种有效的解决方案：一是通过客户端JavaScript动态设置 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负责构建和赋值。
实现步骤：
在EJS模板中，为 <img src="images/%20%E6%A0%87%E7%AD%BE%E8%AE%BE%E7%BD%AE%E4%B8%80%E4%B8%AA%E5%94%AF%E4%B8%80%E7%9A%84%20id%EF%BC%8C%E5%B9%B6%E5%8F%AF%E4%BB%A5%E9%A2%84%E7%95%99%E4%B8%80%E4%B8%AA%E7%A9%BA%E7%9A%84%20src%20%E5%B1%9E%E6%80%A7%E3%80%82%E5%B0%86%E5%9B%BE%E7%89%87%E6%96%87%E4%BB%B6%E5%90%8D%EF%BC%88%E6%88%96%E5%AE%8C%E6%95%B4%E8%B7%AF%E5%BE%84%EF%BC%89%E4%BD%9C%E4%B8%BA%E6%95%B0%E6%8D%AE%E5%B1%9E%E6%80%A7%EF%BC%88data-*%EF%BC%89%E6%88%96%E9%9A%90%E8%97%8F%E5%AD%97%E6%AE%B5%E4%BC%A0%E9%80%92%E7%BB%99%E5%89%8D%E7%AB%AF%EF%BC%8C%E6%88%96%E8%80%85%E7%9B%B4%E6%8E%A5%E5%9C%A8EJS%E4%B8%AD%E6%B8%B2%E6%9F%93%E4%B8%80%E4%B8%AAJavaScript%E5%8F%98%E9%87%8F%E3%80%82%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%E8%AF%A5%20%20%E5%85%83%E7%B4%A0%EF%BC%8C%E5%B9%B6%E5%8A%A8%E6%80%81%E8%AE%BE%E7%BD%AE%E5%85%B6%20src%20%E5%B1%9E%E6%80%A7%E3%80%82
EJS%E6%A8%A1%E6%9D%BF%20(createPage.ejs)%20%E4%BF%AE%E6%94%B9%EF%BC%9A
@@##@@ const imageName = ""; // EJS变量在服务器端渲染时被替换 document.addEventListener('DOMContentLoaded', () => { const imageElement = document.getElementById("dynamicImage"); if (imageElement && imageName) { // 假设图片在 /images/ 目录下 imageElement.src = "/images/" + imageName; // 或者如果express.static配置为直接访问uploads目录，则可以是： // imageElement.src = "/" + imageName; } });
%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上下文下，无法正确解析相对路径。
检查要点：
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/”。
浏览器开发者工具:当图片加载失败时，打开浏览器的开发者工具（通常按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的影响。
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页面上显示。
以上就是动态图片路径在EJS模板中：解决src=””属性无法正确解析的问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1582323.html
微信扫一扫 
支付宝扫一扫 
