Nodejs ejs模版加载数据的标签解析问题

Nodejs ejs模版加载数据的标签解析问题

求教:获取的数据用ejs的模版渲染出来,在浏览器看的时候: <img src=""align=“absmiddle” >aaa

解析成了文字, 而不是图片元素,求教这个问题怎么解决哟?

4 回复

Nodejs ejs 模版加载数据的标签解析问题

在使用 EJS（Embedded JavaScript）模板引擎时，有时候会遇到从后端获取的数据在渲染到前端页面时，某些 HTML 标签没有被正确解析为 HTML 元素，而是直接显示为文本。这种情况通常是由于 EJS 渲染模式导致的。

示例背景

假设我们有一个简单的 Express 应用，并且想要通过 EJS 模板引擎渲染一些包含图片的 HTML 内容。例如：

// app.js
const express = require('express');
const app = express();
app.set('view engine', 'ejs');

app.get('/', (req, res) => {
    const data = { content: '<img src="image.jpg" align="absmiddle"> aaa' };
    res.render('index', data);
});

app.listen(3000, () => console.log('Server is running on port 3000'));

在这个例子中，content 变量包含了一个字符串，该字符串包含一个 <img> 标签和一些文本。

EJS 模板文件

接下来，我们看看 EJS 模板文件 views/index.ejs：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EJS Template Example</title>
</head>
<body>
    <div><%- content %></div>
</body>
</html>

注意这里的 <%- content %> 标签。EJS 提供了两种不同的方式来插入变量内容：<%= variable %> 和 <%- variable %>。

  • <%= variable %>：这个标签会将变量值作为纯文本输出，它会自动进行 HTML 转义，防止 XSS 攻击。
  • <%- variable %>：这个标签会将变量值作为 HTML 代码输出，不会进行转义。

解决方案

在上面的例子中，如果使用 <%= content %>，那么 <img> 标签会被当作普通文本处理，而不是作为 HTML 元素。因此，应该使用 <%- content %> 来确保 HTML 内容被正确解析和渲染。

总结

如果你希望在 EJS 模板中渲染包含 HTML 的变量内容，请务必使用 <%- variable %> 标签，以确保 HTML 代码被正确解析和呈现。这样可以避免将 HTML 内容误认为纯文本显示的问题。


<%- src %> 和 <%= src %> 注意区分 前者用于输出源代码

谢谢

在使用 EJS 模板引擎时，如果希望正确渲染 HTML 标签，需要确保这些标签在传入模板之前是经过正确处理的。默认情况下，EJS 会转义 HTML 内容以防止 XSS 攻击，因此你需要告诉 EJS 不要转义特定部分的内容。

你可以使用 <%- 这种语法来输出不被转义的内容。例如：

<%- imgTag %>

假设你在 Node.js 中有一个变量 imgTag 包含 <img src="example.jpg" align="absmiddle">，你可以在 EJS 模板中这样使用：

// 在 Node.js 中
const imgTag = '<img src="example.jpg" align="absmiddle">';
res.render('your-template.ejs', { imgTag });

然后在 EJS 模板中：

<!DOCTYPE html>
<html>
<head>
    <title>Your Page Title</title>
</head>
<body>
    <%- imgTag %>
</body>
</html>

这样，浏览器就会正确地解析并显示图片，而不是将内容作为纯文本显示。

如果你有多个地方需要插入这种未经转义的 HTML 内容，可以考虑创建一个自定义的 EJS 函数来简化操作。例如：

app.engine('ejs', require('ejs').renderFile);
app.set('view engine', 'ejs');

app.locals.escapeHtml = function(html) {
    return new String(html);
};

// 在 Node.js 中
const imgTag = '<img src="example.jpg" align="absmiddle">';
res.render('your-template.ejs', { imgTag });

然后在 EJS 模板中：

<!DOCTYPE html>
<html>
<head>
    <title>Your Page Title</title>
</head>
<body>
    <%= escapeHtml(imgTag) %>
</body>
</html>

通过这种方式，你可以在多个地方使用相同的函数来避免重复代码。

回到顶部