【发布时间】：2016-12-16 02:42:53
【问题描述】：
我正在 SendGrid 中创建一个模板，我试图将一个图像放在中心，以及我想成为标签的 URL，以便我可以在我的代码中动态替换，因为它将来自我的数据库。
我试图简单地在输入字段中放置一个标签，但它不接受。 有什么办法可以做到吗？
谢谢！
【问题讨论】：
标签： express sendgrid sendgrid-templates
【发布时间】：2016-12-16 02:42:53
【问题描述】：
我假设您已经设法通过 Node.js 触发了 SendGrid API，因为您使用 Express 标记来标记问题。
我目前也在尝试使用 SendGrid 构建事务性电子邮件模板，并且我设法完成了。
您可能希望首先使用构建器添加新的图像元素。
然后上传一张图片。上传图片后，双击图片元素。获取图像文件的名称并复制它。
切换到代码视图。
在代码视图中，找到包含您的图像文件名称的 html 标记。这是我的一个例子。
用您的“替代标签”替换此代码。
保存模板。您的模板应该可以使用了。在您的 Node.js 代码中，设置替换标记。
mail.personalizations[0].addSubstitution(new helper.Substitution("your-subtitution-tag", "image-url"));
我使用了这个库：https://github.com/sendgrid/sendgrid-nodejs 希望您的电子邮件应该包含新图像。
我把上面的一些敏感内容模糊了。这是我的电子邮件结果。希望这会有所帮助！
【讨论】：
-
尼古拉斯，感谢您非常完整的回答！我前段时间发布了这个，我已经设法做到了。我做了一点不同。我在
img标签的src属性中放置了一个标签，类似于：https://-url-。但是我刚刚在模板上看到这里的结果和你的一样。希望这可以帮助更多的人！谢谢！ :) -
我无法找到切换到“代码”视图的选项。他们必须在他们的 UI b/c 中进行了更改，我知道的主要代码视图位于一个完全不同的模板中，您必须在创建它时选择代码或设计模式。从设计模式，我可以进入图像模块的代码视图，但它不会让我编辑添加一个包含我的子标签的 src 属性。
-
我不记得了，但我想我必须在另一个项目上做这件事，我通过像建议的那样编辑模块的代码来让它工作。但我很模糊。
正如许多人所注意到的，在最初创建电子邮件模板后，Sendgrid 已经改变了在“基于代码”编辑器和“设计所见即所得”编辑器之间切换的能力，从而使 Nicholas 的回答变得无关紧要（对不起，伙计）。必须在创建点选择，然后将其作为该类型的编辑器模式。
我认为你们中的许多人（我知道我愿意！）希望保留对电子邮件进行可视化编辑器的能力（允许设计师和文案编写者完成他们的工作，而不会打扰开发人员的更改），同时又不放弃关于 Sendgrid 的动态电子邮件提供的定制好东西。
我找到了一个替代方案，虽然有点麻烦，但可以达到预期的效果。
按照这组说明在“所见即所得”模板编辑器中的 img 标记的 src 属性中插入一个动态值：
- 创建一个新的 Design Editor 模板（您可以在添加该模板的第一个版本后选择它）。
- 设计您的电子邮件 - 添加文本、图像等等。
- 选择一个图像项框（您想稍后将 SRC URL 注入到的那个），然后单击查看代码图标以查看背后的代码 (code-behind button)。
- 复制当前存在的 URL 值（我假设您在步骤 2 中选择了一个临时图像只是为了对您的电子邮件进行样式化），然后关闭此对话框而不进行任何更改。
- 转到左侧构建侧边栏的导入/导出部分（在那儿），然后单击导出HTML。保存文件并在文本编辑器中打开它。
- 搜索您在第 (4) 步中复制的 URL，并将其替换为您选择的动态变量（例如：{{my_dynamic_logo_url}}）。
- 复制整个文件内容（在上一步中进行更改之后），然后返回到 Sendgrid 编辑器，并单击同一 Import/Export 中的 Import 按钮em> 步骤 (5) 中的部分。
- 在其中粘贴文件内容，然后单击“确定”。它看起来都一样（也许只有图像本身会消失，但没关系 - 相信我。立即保存您的模板。
- 瞧 - 通过 API 发送您的电子邮件，同时将所需的 URL 注入 {{my_dynamic_logo_url}} - 您现在应该能够看到显示在收到的电子邮件上的动态图像。
- 在这里打出漂亮的第 10 轮 :P
Attaching image that can help with the process
【讨论】：
-
这仅适用于交易电子邮件吗？或者我也可以从“营销>模板”部分使用它吗？
-
@PacoZevallos 据我所知，这仅适用于事务性电子邮件。很抱歉迟到的回复错过了通知:)。
-
这对我来说非常有用，非常感谢！ 1 点虽然在第 3 步之后，我基本上只需要执行第 6 步，我所做的就是使用动态车把更改 src 标签，即 {{my_dynamic_image_url}} 这意味着我不必执行任何其他步骤并且它仍然有效。我之前已经完成了所有 8 个步骤，尽管有一次在电子邮件中添加动态迭代，所以这也很有帮助！谢谢
-
肯定的 :) 也许他们修复了一些错误或随着时间的推移改变了编辑器的工作方式（这最初是在 2019 年 3 月编写的），因为我确实注意到他们的编辑器最近发生了一些变化几个月..
这对我有用，如果可以帮助任何使用新的动态交易电子邮件模板的人。我从构建屏幕添加了一个空白图像。然后单击该图标以显示该图像的原始 HTML 代码。我只是使用把手语法将适当的属性添加到“src”属性。无需进行其他更改。
例如：src="{{ imageURI }}""
【讨论】：