Nodejs EJS模板的img_tag()方法 undefined..

Nodejs EJS模板的img_tag()方法 undefined…

我在http://www.embeddedjs.com/ 看到EJS 有一个插入图片的方法 <%= img_tag(‘images/maid.png’) %> 我自己用 怎么报错了? 1.jpg 2.jpg

3 回复

Node.js EJS 模板中的 img_tag() 方法未定义问题

问题描述

你尝试在 EJS 模板中使用一个名为 img_tag() 的方法来插入图片，但遇到了 undefined 错误。这可能是因为该方法并不存在于 EJS 中，或者你在调用它时出现了错误。

解决方案

1. 使用标准 EJS 语法 EJS 本身并没有内置的 img_tag() 方法。你可以直接使用标准的 HTML <img> 标签来插入图片。例如：

<img src="<%= imagePath %>" alt="My Image">

在你的 JavaScript 代码中设置 imagePath 变量：

const ejs = require('ejs');
const path = 'images/maid.png';

ejs.render('<img src="<%= imagePath %>" alt="My Image">', { imagePath: path });

2. 自定义辅助函数 如果你确实需要自定义的 img_tag() 方法，可以在渲染 EJS 模板之前添加一个辅助函数到上下文中。以下是一个简单的实现示例：

const ejs = require('ejs');

// 定义 img_tag 函数
function img_tag(src) {
    return `<img src="${src}" alt="Image">`;
}

// 渲染 EJS 模板
ejs.renderFile('path/to/template.ejs', { img_tag }, (err, html) => {
    if (err) throw err;
    console.log(html);
});

在你的 EJS 模板中使用 img_tag() 函数：

<%= img_tag('images/maid.png') %>

示例代码

假设你有一个 EJS 模板文件 template.ejs：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EJS Image Example</title>
</head>
<body>
    <%= img_tag('images/maid.png') %>
</body>
</html>

在你的 Node.js 应用程序中：

const ejs = require('ejs');
const fs = require('fs');

// 定义 img_tag 函数
function img_tag(src) {
    return `<img src="${src}" alt="Image">`;
}

// 渲染 EJS 模板
ejs.renderFile('template.ejs', { img_tag }, (err, html) => {
    if (err) throw err;
    console.log(html);

    // 将结果写入文件
    fs.writeFileSync('output.html', html);
});

通过这种方式，你可以避免 img_tag() 方法未定义的问题，并且能够正确地在 EJS 模板中插入图片。


这个ejs的参考文档可不是在那个网站上，看这里 https://github.com/tj/ejs 没有原生的 helper， 可以自行github搜索 ejs helper，不过个人不太喜欢helper的写法

根据你的描述，你在使用 EJS 模板引擎时尝试调用 img_tag 方法，但遇到了 undefined 错误。实际上，EJS 模板引擎本身并没有提供 img_tag 这个内置方法。你需要自己定义这个方法或者使用插件来实现类似功能。

解决方案

你可以通过以下两种方式解决这个问题：

1. 自定义 img_tag 方法

在你的 EJS 文件中或者在渲染 EJS 的 Node.js 服务端代码中，可以定义一个辅助函数来生成 <img> 标签：

// 在 Node.js 服务端定义 img_tag 方法
function img_tag(src) {
    return `<img src="${src}" alt="">`;
}

// 使用 EJS 渲染时传递这个函数
res.render('template', { img_tag });

然后在你的 EJS 模板文件中可以直接调用这个方法：

<%- img_tag('images/maid.png') %>

注意这里使用了 <%- 来输出 HTML 代码，以确保标签被正确解析。

2. 使用第三方库

你也可以使用第三方库，例如 ejs-filters 或者 lodash 来简化这类操作。比如使用 lodash 的 template 方法：

首先安装 lodash：

npm install lodash

然后在 Node.js 中使用它：

const _ = require('lodash');

// 创建一个模板
const template = _.template('<img src="<%= src %>" alt="">');

// 渲染模板
const html = template({ src: 'images/maid.png' });

console.log(html);

这种方式可以让你更灵活地处理字符串模板。

小结

EJS 本身没有 img_tag 方法，你需要自定义该方法或使用第三方库来实现这一功能。上面的示例代码展示了如何通过自定义方法或者使用第三方库来实现这一目标。

回到顶部