mjml-react | React component library to generate the HTML emails | Email library

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/.