How use relative paths on MJML with mjml-react for email templates

Question

Describe the bug

• The use of relative paths render broken links on the email recipient
• The use of links from images on the web generate broken links on the email, except for the case that these links have a termination which explicitly names an image, with its type (jpg, etc), e.g src="http:://somelink....jpg"

To Reproduce

Relative path does not work:

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

Only this kind of link that works:

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

Expected behavior The image should show on the email of the recipient.

MJML environment (please complete the following information):

• OS: Windows
• MJML Version 4.7.1
• MJML tool used: mjml-react 1.0.61

Email sending environment(for rendering issues):

• Platform used to send the email: Gmail

Affected email clients (for rendering issues):

• Email Client: Gmail
• OS: Windows
• Browser: Google Chrome

Screenshots

Additional context I tried using this package and followed the steps for webpack on my next.config.js file (I am using NextJs) but it did not work also.

Answer 1

In the general case:

Relative addresses work on your system as you're developing your email.

Sadly, there's no way to send external files with your email. Hence, files you can find with relative addresses on your system are unlikely to be present on your recipient's system.

You'll want to put your files at Internet-reachable URLs and refer to them that way in your emails.

As you observed, that works well when you reference the entire path and filename, including the extension.

In your case:

The package you're using strives to be a way to send images with your email. Nifty. If it works, it hides lots of complexity.

I notice about that package that it hasn't been updated in two years or more. If it worked then, it'd be no surprise that it no longer works. Good luck!

Extras: Be careful with sending your email. Every email client I've heard about changes your HTML if you use cut-and-paste to put the HTML in their editor for sending. If they change your HTML, you're not sending what you thought you were sending. Bummer. The fix is to use an email service provider. Some are free for a limited number of emails sent. Pick one that doesn't change your HTML; some do!

You can test your HTML by pasting it into the free service https://putsmail.com (don't click the option to inline your CSS). They'll send the email to the email account of your choice and you can check it in the email client of your choice.

By the way, a great source of MJML support is https://slack.mjml.io/.