电子邮件不使用 handlebars.js 显示 base64 图像答案

【问题标题】：E-mail doesn't display base64 image using handlebars.js电子邮件不使用 handlebars.js 显示 base64 图像
【发布时间】：2018-09-30 23:34:27
【问题描述】：

伙计们，我一直在使用 handlebars.js 在 HTML 电子邮件中显示 base64 图像。

    //imageURL : data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4MLwWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw==
    <img id="img" class="someClass" src="{{imageURL}}" >

我不知道如何使用把手显示图像。请帮助我更进一步。

【问题讨论】：

图片URL是base64文本？因为那样你就可以使用src="data:image/png;base64, {{imageURL}}"
不，这不是简单的文本，imageurl包含完整的base64字符串
如果您在 img 标签中硬编码 imageURL，它会显示吗？另外，输出的 HTML 是什么？（右键单击 + 检查元素）
是的，当我对其进行热编码时，它会显示出来
如果您将它与{{imageURL}} 一起使用，它会在浏览器开发工具 (F12) 中显示什么？

标签： javascript handlebars.js

【解决方案1】：

您的模板已经正确。如果您想要使用模板的示例，请参阅以下代码：

var source = document.getElementById("template").innerHTML;
var template = Handlebars.compile(source);
var context = {
  imageURL: "data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4MLwWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw=="
};
var html = template(context);

document.getElementById("template").innerHTML = html;

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
<div id="template">
  <img id="img" class="someClass" src="{{imageURL}}" >
</div>

更新：作者没有说明该模板是在电子邮件中使用的。正如 cmets 中所说，电子邮件客户端可能不支持 base64 图像。有关此问题的更详细答案，请查看http://stackoverflow.com/a/9330720/2540618 的答案。

【讨论】：

当它作为html模板发送到邮件时它不起作用，实际上我正在尝试使用把手将图像作为html模板发送到邮件
一些电子邮件客户端不支持这个。有关电子邮件客户端支持图像 URI 的 StackOverflow 上的不同问题，请参阅以下答案：stackoverflow.com/a/9330720/2540618

【解决方案2】：

您需要像这样使用 Handlebars 中的 SafeString：

import { SafeString } from 'handlebars'

const imageURL = new SafeString('data:image/png;base64,R0lGODlhDwAPAKECAAAAzMzM/////wAAACw...')

// In your template
<img id="img" class="someClass" src="{{imageURL}}" >

【讨论】：