我可以在 SendGrid 模板中使用带有替换标签的图像吗?
Can I have an image with a substitution tag in a SendGrid template?
我正在 SendGrid 中创建一个模板,我试图将图像放在中心,URL我想成为一个标签,这样我就可以在我的代码中动态替换,因为它会来自我的数据库。
我试图简单地在输入字段中放置一个标签,但它不接受。
有什么办法可以做到吗?
谢谢!
我假设您已经通过 Node.js 触发了 SendGrid API,因为您使用 Express 标签标记了问题。
我目前也在尝试使用 SendGrid 构建交易电子邮件模板,我设法完成了这个。
您可能希望首先使用生成器添加新的图像元素。
然后上传一张图片。上传图像后,双击图像元素。获取图像文件的名称并复制它。
切换到代码视图。
在代码视图中,找到包含您的图像文件名称的 html 标记。这是我的例子。
将此代码替换为您的 "substitution tag"。
保存模板。您的模板应该可以使用了。在您的 Node.js 代码中,设置替换标签。
mail.personalizations[0].addSubstitution(new helper.Substitution("your-subtitution-tag", "image-url"));
我使用了这个库:https://github.com/sendgrid/sendgrid-nodejs希望您的电子邮件中包含新图像。
我把上面的一些敏感内容模糊掉了。这是我这边的电子邮件结果。希望这对您有所帮助!
正如许多人注意到的那样,Sendgrid 更改了在最初创建电子邮件模板后在 "code-based" 编辑器和 "design WYSIWYG" 编辑器之间切换的功能,从而使 Nicholas 的回答变得无关紧要(抱歉,伙计)。必须select在创建点,然后它作为那种类型的编辑器模式。
我假设你们中的许多人(我知道我愿意!)希望保留电子邮件的可视化编辑器的能力(允许设计师和撰稿人在不打扰开发人员进行更改的情况下完成他们的工作)而不是放弃 Sendgrid 的动态电子邮件提供的定制好东西。
我找到了一个替代方案,虽然有点麻烦,但可以提供所需的结果。
按照这组说明将动态值插入到 img 标签的 src 属性中 "wysiwyg"模板编辑器:
- 创建一个新的 Design Editor 模板(一旦您添加了该模板的第一个版本,它将允许您 select )。
- 设计您的电子邮件 - 添加文本、图像等等。
- Select一个image item box(后面要注入的那个SRC URL),点击查看代码图标可以看到后面的代码(code-behind button ).
- 复制当前存在的 URL 值(我假设您 select 编辑了一个临时图像只是为了在第 2 步中对您的电子邮件进行样式化)然后关闭此对话框而不做任何更改。
- 转到 Import/Export 左侧边栏 Build 部分(在那里),然后单击导出 HTML。保存文件并在文本编辑器中打开它。
- 搜索您在步骤 (4) 中复制的 URL 并将其替换为您选择的动态变量(例如:{{my_dynamic_logo_url}})。
- 复制整个文件内容(在上一步更改之后),然后返回到 Sendgrid 编辑器,并单击同一 [=20] 中的 导入 按钮=]Import/Export 步骤 (5) 中的部分。
- 将文件内容粘贴到那里,然后单击“确定”。它看起来完全一样(也许只有图像本身会消失,但没关系 - 相信我。立即保存您的模板。
- 瞧 - 通过 API 发送您的电子邮件,同时将所需的 URL 注入 {{my_dynamic_logo_url}} - 您现在应该能够看到显示在收到电子邮件。
- 在这里让它成为一个不错的第 10 轮 :P
Attaching image that can help with the process
如果对使用新动态交易电子邮件模板的任何人有所帮助,这对我有用。我从构建屏幕添加了一个空白图像。然后单击图标以显示该图像的原始 HTML 代码。我只是使用 handlebars 语法将适当的 属性 添加到 "src" 属性。不需要其他更改。
例如:src="{{ imageURI }}""
我正在 SendGrid 中创建一个模板,我试图将图像放在中心,URL我想成为一个标签,这样我就可以在我的代码中动态替换,因为它会来自我的数据库。
我试图简单地在输入字段中放置一个标签,但它不接受。 有什么办法可以做到吗?
谢谢!
我假设您已经通过 Node.js 触发了 SendGrid API,因为您使用 Express 标签标记了问题。
我目前也在尝试使用 SendGrid 构建交易电子邮件模板,我设法完成了这个。
您可能希望首先使用生成器添加新的图像元素。
然后上传一张图片。上传图像后,双击图像元素。获取图像文件的名称并复制它。
切换到代码视图。
在代码视图中,找到包含您的图像文件名称的 html 标记。这是我的例子。
将此代码替换为您的 "substitution tag"。
保存模板。您的模板应该可以使用了。在您的 Node.js 代码中,设置替换标签。
mail.personalizations[0].addSubstitution(new helper.Substitution("your-subtitution-tag", "image-url"));
我使用了这个库:https://github.com/sendgrid/sendgrid-nodejs希望您的电子邮件中包含新图像。
我把上面的一些敏感内容模糊掉了。这是我这边的电子邮件结果。希望这对您有所帮助!
正如许多人注意到的那样,Sendgrid 更改了在最初创建电子邮件模板后在 "code-based" 编辑器和 "design WYSIWYG" 编辑器之间切换的功能,从而使 Nicholas 的回答变得无关紧要(抱歉,伙计)。必须select在创建点,然后它作为那种类型的编辑器模式。
我假设你们中的许多人(我知道我愿意!)希望保留电子邮件的可视化编辑器的能力(允许设计师和撰稿人在不打扰开发人员进行更改的情况下完成他们的工作)而不是放弃 Sendgrid 的动态电子邮件提供的定制好东西。
我找到了一个替代方案,虽然有点麻烦,但可以提供所需的结果。
按照这组说明将动态值插入到 img 标签的 src 属性中 "wysiwyg"模板编辑器:
- 创建一个新的 Design Editor 模板(一旦您添加了该模板的第一个版本,它将允许您 select )。
- 设计您的电子邮件 - 添加文本、图像等等。
- Select一个image item box(后面要注入的那个SRC URL),点击查看代码图标可以看到后面的代码(code-behind button ).
- 复制当前存在的 URL 值(我假设您 select 编辑了一个临时图像只是为了在第 2 步中对您的电子邮件进行样式化)然后关闭此对话框而不做任何更改。
- 转到 Import/Export 左侧边栏 Build 部分(在那里),然后单击导出 HTML。保存文件并在文本编辑器中打开它。
- 搜索您在步骤 (4) 中复制的 URL 并将其替换为您选择的动态变量(例如:{{my_dynamic_logo_url}})。
- 复制整个文件内容(在上一步更改之后),然后返回到 Sendgrid 编辑器,并单击同一 [=20] 中的 导入 按钮=]Import/Export 步骤 (5) 中的部分。
- 将文件内容粘贴到那里,然后单击“确定”。它看起来完全一样(也许只有图像本身会消失,但没关系 - 相信我。立即保存您的模板。
- 瞧 - 通过 API 发送您的电子邮件,同时将所需的 URL 注入 {{my_dynamic_logo_url}} - 您现在应该能够看到显示在收到电子邮件。
- 在这里让它成为一个不错的第 10 轮 :P
Attaching image that can help with the process
如果对使用新动态交易电子邮件模板的任何人有所帮助,这对我有用。我从构建屏幕添加了一个空白图像。然后单击图标以显示该图像的原始 HTML 代码。我只是使用 handlebars 语法将适当的 属性 添加到 "src" 属性。不需要其他更改。
例如:src="{{ imageURI }}""