如何将 MJML 上的相对路径与 mjml-react 用于电子邮件模板
How use relative paths on MJML with mjml-react for email templates
描述错误
- 使用相对路径在电子邮件收件人上呈现损坏的 links
- 使用来自网络图像的 links 在电子邮件中生成损坏的 links，除非这些 links 有一个明确命名为图片及其类型（jpg 等），例如
src="http:://somelink....jpg"
重现
相对路径不起作用：
<MjmlImage
width="400px"
src="./public/Book/Book.png"
></MjmlImage>
只有这种link有效：
<MjmlImage
width="400px"
src="https://image.shutterstock.com/image-photo/bright-spring-view-cameo-island-260nw-1048185397.jpg"
></MjmlImage>
预期行为
图片应显示在收件人的电子邮件中。
MJML环境（请填写以下信息）：
- OS: Windows
- MJML 版本 4.7.1
- 使用的MJML工具：mjml-react 1.0.61
邮件发送环境（渲染问题）:
- 用于发送电子邮件的平台：Gmail
受影响的电子邮件客户端（呈现问题）：
- 电子邮件客户端：Gmail
- OS: Windows
- 浏览器：GoogleChrome
截图
其他上下文
我尝试使用 this package 并在我的 next.config.js 文件中按照 webpack 的步骤进行操作（我使用的是 NextJs），但它也不起作用。
一般情况下：
在您开发电子邮件时，相对地址适用于您的系统。
遗憾的是，您无法通过电子邮件发送外部文件。因此，您可以在您的系统上找到具有相对地址的文件不太可能出现在您的收件人的系统上。
您需要将文件放在 Internet 可访问的 URL 中，并在您的电子邮件中以这种方式引用它们。
如您所见，当您引用整个路径和文件名（包括扩展名）时效果很好。
你的情况：
您正在使用的软件包努力成为一种通过电子邮件发送图像的方式。漂亮。如果可行，它会隐藏很多复杂性。
我注意到那个软件包已经两年或更长时间没有更新了。如果它当时有效，那么它不再有效也就不足为奇了。祝你好运！
额外：发送电子邮件时要小心。如果您使用剪切和粘贴将 HTML 放入他们的编辑器中以便发送，我听说过的每个电子邮件客户端都会更改您的 HTML。如果他们更改了您的 HTML，您发送的并不是您认为发送的内容。无赖。解决方法是使用电子邮件服务提供商。有些是免费的，发送的电子邮件数量有限。选择一个不会改变您的 HTML；有些会！
您可以通过将 HTML 粘贴到免费服务 https://putsmail.com 来测试您的 HTML（不要单击内嵌 CSS 的选项）。他们会将邮件发送到您选择的电子邮件帐户，您可以在您选择的电子邮件客户端中查看。
顺便说一句，MJML 支持的重要来源是 https://slack.mjml.io/。
描述错误
- 使用相对路径在电子邮件收件人上呈现损坏的 links
- 使用来自网络图像的 links 在电子邮件中生成损坏的 links，除非这些 links 有一个明确命名为图片及其类型（jpg 等），例如
src="http:://somelink....jpg"
重现
相对路径不起作用：
<MjmlImage
width="400px"
src="./public/Book/Book.png"
></MjmlImage>
只有这种link有效：
<MjmlImage
width="400px"
src="https://image.shutterstock.com/image-photo/bright-spring-view-cameo-island-260nw-1048185397.jpg"
></MjmlImage>
预期行为 图片应显示在收件人的电子邮件中。
MJML环境（请填写以下信息）：
- OS: Windows
- MJML 版本 4.7.1
- 使用的MJML工具：mjml-react 1.0.61
邮件发送环境（渲染问题）:
- 用于发送电子邮件的平台：Gmail
受影响的电子邮件客户端（呈现问题）：
- 电子邮件客户端：Gmail
- OS: Windows
- 浏览器：GoogleChrome
截图
其他上下文
我尝试使用 this package 并在我的 next.config.js 文件中按照 webpack 的步骤进行操作（我使用的是 NextJs），但它也不起作用。
一般情况下：
在您开发电子邮件时，相对地址适用于您的系统。
遗憾的是，您无法通过电子邮件发送外部文件。因此，您可以在您的系统上找到具有相对地址的文件不太可能出现在您的收件人的系统上。
您需要将文件放在 Internet 可访问的 URL 中，并在您的电子邮件中以这种方式引用它们。
如您所见，当您引用整个路径和文件名（包括扩展名）时效果很好。
你的情况：
您正在使用的软件包努力成为一种通过电子邮件发送图像的方式。漂亮。如果可行，它会隐藏很多复杂性。
我注意到那个软件包已经两年或更长时间没有更新了。如果它当时有效，那么它不再有效也就不足为奇了。祝你好运！
额外：发送电子邮件时要小心。如果您使用剪切和粘贴将 HTML 放入他们的编辑器中以便发送，我听说过的每个电子邮件客户端都会更改您的 HTML。如果他们更改了您的 HTML，您发送的并不是您认为发送的内容。无赖。解决方法是使用电子邮件服务提供商。有些是免费的，发送的电子邮件数量有限。选择一个不会改变您的 HTML；有些会！
您可以通过将 HTML 粘贴到免费服务 https://putsmail.com 来测试您的 HTML（不要单击内嵌 CSS 的选项）。他们会将邮件发送到您选择的电子邮件帐户，您可以在您选择的电子邮件客户端中查看。
顺便说一句，MJML 支持的重要来源是 https://slack.mjml.io/。