0

描述错误

  • 使用相对路径会在电子邮件收件人上呈现断开的链接
  • 使用网络上图像的链接会在电子邮件上生成损坏的链接，除非这些链接具有明确命名图像及其类型（jpg 等）的终止，例如src="http:://somelink....jpg"

重现

相对路径不起作用：

       <MjmlImage
              width="400px"
              src="./public/Book/Book.png"
            ></MjmlImage>

只有这种有效的链接：

<MjmlImage
              width="400px"
              src="https://image.shutterstock.com/image-photo/bright-spring-view-cameo-island-260nw-1048185397.jpg"
            ></MjmlImage>

预期行为 图像应显示在收件人的电子邮件中。

MJML环境（请填写以下信息）：

  • 操作系统：Windows
  • MJML 版本 4.7.1
  • 使用的 MJML 工具：mjml-react 1.0.61

邮件发送环境（渲染问题）：

  • 用于发送电子邮件的平台：Gmail

受影响的电子邮件客户端（用于呈现问题）：

  • 电子邮件客户端：Gmail
  • 操作系统：Windows
  • 浏览器：谷歌浏览器

截图

电子邮件断开的链接

附加上下文 我尝试使用这个包并按照我的文件中的步骤webpack（next.config.js我正在使用 NextJs）但它也不起作用。

4

1 回答 1

1

在一般情况下：

当您开发电子邮件时，相对地址在您的系统上工作。

遗憾的是，您无法通过电子邮件发送外部文件。因此，您可以在系统上找到具有相对地址的文件不太可能出现在收件人的系统上。

您需要将文件放在 Internet 可访问的 URL 上，并以这种方式在您的电子邮件中引用它们。

正如您所观察到的，当您引用整个路径和文件名（包括扩展名）时，效果很好。

在你的情况下：

您正在使用的软件包努力成为一种通过电子邮件发送图像的方式。漂亮。如果它有效，它隐藏了很多复杂性。

我注意到该软件包两年或更长时间没有更新。如果它当时有效，那么它不再有效也就不足为奇了。祝你好运！

附加功能：发送电子邮件时要小心。如果您使用剪切和粘贴将 HTML 放入他们的编辑器进行发送，我听说过的每个电子邮件客户端都会更改您的 HTML。如果他们更改了您的 HTML，您就不会发送您认为发送的内容。真可惜。解决方法是使用电子邮件服务提供商。有些是免费发送的有限数量的电子邮件。选择一个不会改变你的 HTML 的；有的！

您可以通过将 HTML 粘贴到免费服务https://putsmail.com来测试您的 HTML （不要单击内联 CSS 的选项）。他们会将电子邮件发送到您选择的电子邮件帐户，您可以在您选择的电子邮件客户端中查看。

顺便说一句，MJML 支持的重要来源是https://slack.mjml.io/。

于 2020-12-21T07:43:23.127 回答