无法将 SVG 编译成 Handlebars HTML 模板

Question

我正在后端编译 handlebars 模板以作为 HTML 电子邮件发送。我的一些消息需要包含服务器生成的 SVG - QRCodes。

我使用现有库制作了一个简单的 Handlebars 助手 - qrcode-svg。代码如下：

Handlebars.registerHelper('qrcode', (data) => {
  const svg = new QRCode({
    content: data,
    width: 90,
    height: 90,
    xmlDeclaration: false,
    join: true
  }).svg();
  return svg;
});

我正在使用的库独立运行良好。我的模板有如下片段：

            {{#each tickets}}
            <div style="...">
              <div style="...">
                {{{qrcode payload}}}
              </div>
              <div>{{title}}</div>
              <div>{{sequence}}</div>
            </div>
            {{/each}}

如果我使用 no-escape {{{...}}} 版本或在 Handlebars 选项中将 noEspace 设置为 true，我会在 HTML 电子邮件中收到一堆 <u></u>。

如果我正常使用 {{qrcode payload}}，我会做一个 svg，只是它是 "<svg.../>" 例如我的 svg 被双引号括起来，电子邮件无法正确呈现。我看到的不是 SVG，而是代表它的 HTML 代码。

我该怎么办？

Answer 1

你提到的 <u></u> 代码让我觉得你在 Gmail 的桌面网络邮件上检查过这个，它不支持 embedded SVG nor external SVG。

如果您的图片是内容的重要组成部分，并且您希望大多数人都能看到它，请确保使用支持更好的格式，例如 JPG、GIF 或 PNG。

Answer 2

我最后做了别的事。分叉 node-svg 库并教它打印 HTML 表。如果有用，请随意 use/clone/fork 从 https://github.com/Diophant/qrcode-svg-table

无法将 SVG 编译成 Handlebars HTML 模板

Cannot compile SVG into Handlebars HTML template

javascript

svg

html-email

handlebars.js