Question

我在SendGrid中创建了一个模板，我试图将图像放在中心，而我希望将URL作为标记，以便我可以在代码中动态替换，因为它将来自我的数据库。

我试图在输入字段中放置一个标记，但它并不接受。有没有办法可以实现这个目标？

谢谢！

Answer 1

我假设您已经设法通过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希望您的电子邮件中包含新图片。

我模糊了上面的一些敏感内容。这是我的电子邮件结果。希望这有帮助！

Answer 2

许多人注意到，在最初创建电子邮件模板后，Sendgrid已将在“基于代码的”编辑器与“设计所见即所得”编辑器之间切换的功能更改了，从而使Nicholas的答案无关紧要（对不起）。必须在创建点进行选择，然后将其保留为该类型的编辑器模式。

我假设你们中的许多人（我知道我愿意！）希望保留对电子邮件进行可视化编辑的能力（允许设计师和文案作者在不打扰开发人员更改的情况下完成工作），同时又不放弃关于Sendgrid的动态电子邮件提供的定制好东西。

我发现了一种替代方法，尽管有点麻烦，但可以达到预期的结果。

按照以下说明在“所见即所得”模板编辑器中的 img 标签的 src 属性中插入动态值：

创建一个新的 Design Editor 模板（添加该模板的第一个版本后，您就可以选择它）。
设计您的电子邮件-添加文本，图片和其他内容。
选择一个图像项目框（您想在以后插入SRC URL的框），然后单击查看代码图标以查看（code-behind button）后面的代码。
复制当前存在的URL值（假设您选择了一个临时图像只是为了在第2步上设置电子邮件的样式），然后关闭此对话框而不进行任何更改。
转到左侧 Build 侧栏（位于此处）中的 Import / Export 部分，然后单击“导出HTML”。保存文件并在文本编辑器中将其打开。
搜索您在步骤（4）中复制的URL，并将其替换为您选择的动态变量（例如：{{my_dynamic_logo_url}}）。
复制整个文件的内容（在上一步中进行更改之后），然后返回到Sendgrid编辑器，并在同一 Import / Export 中单击 Import 按钮。 em>步骤（5）中的部分。
在其中粘贴文件内容，然后单击“确定”。看起来会一样（也许只是图像本身会消失，但是没关系-相信我。立即保存模板。
Voila-通过API发送电子邮件，同时将所需的URL注入{{my_dynamic_logo_url}}-您现在应该能够看到接收到的电子邮件上显示的动态图像。
只要在这里成为第10圈就好：P
Attaching image that can help with the process

Answer 3

如果对使用新的动态交易电子邮件模板的任何人有帮助，这对我很有用。我从构建屏幕添加了空白图像。然后单击图标以显示该图像的原始HTML代码。我只是简单地使用handlebars语法将适当的属性添加到“ src”属性。不需要其他更改。

例如：src="{{ imageURI }}""