Relative Paths not working on MJML with mjml-react #3

[alioshr]

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.

[mastertheblaster]

Hey @alioshr,

Thanks for a such detailed description.

Could you clarify this issue, not sure i get it right. Can you give an example of image on web which is not working ?

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"

Thanks

[mastertheblaster]

In general all image src's should be fully specified https://my-cdn-server.com/path/image.png. Otherwise email clients (web, mobile, desktop, ...) won't be able to fetch and display it for a user.

The package you are referring is converting image to base64 string and inserting into HTML. However this approach is a little bit limited: https://blog.mailtrap.io/embedding-images-in-html-email-have-the-rules-changed/#Inline_embedding_or_base64_images_in_emails

Thus the only valid and supported solution is to use full src's.

[alioshr]

@mastertheblaster thanks so much for replying me back here.

Well, let me be more clear about what I am doing.

I get the template done => pass it throught an API => ship it with nodemailer

In this case, as I am experimenting, I am adding the template straight into nodemailer, as you can see below:

import nodemailer from "nodemailer"
import {render} from 'mjml-react';  
import * as regTemplate from '../../views/Regmjml'

const YOUR_EMAIL_ADDRESS = process.env.MAILER_MY_EMAIL;

const transporter = nodemailer.createTransport({
    host: "smtp.gmail.com",
    port: 465,
    secure: true,
    auth: {
      type: "OAuth2",  
      user: YOUR_EMAIL_ADDRESS,
      serviceClient: process.env.MAILER_CLIENT_ID,
      privateKey: process.env.MAILER_PRIVATE_KEY
  }});

export default async (req, res) => {
    const { name, recipientMail, messageHtml } = req.body
    const {html} = render(regTemplate.generate({name}), {validationLevel: 'soft'})
    const mailerRes = await mailer({  name, recipientMail, html })
    res.send(mailerRes)
}

const mailer = ({  name,  recipientMail, messageHtml, html }) => {
    const message = {
        from: YOUR_EMAIL_ADDRESS,
        to: `${recipientMail}`,
        subject: `New message from ${YOUR_EMAIL_ADDRESS}`,
        replyTo: YOUR_EMAIL_ADDRESS,
        html: html
    }

    return new Promise((resolve, reject) => {
        transporter.sendMail(message, (error, info) =>
            error ? reject(error) : resolve(info)
        )
    })
}

So when I am passing the image links I am passing relative paths. I expect these images to be parsed as html strings.

I have tried putting my images in google drive, google images, etc , and none of these links work as well.

For instance, this link, with a shared image, does not work: https://drive.google.com/file/d/1GVoSMO--v2fzyi6-R_J9bhHHnIrGeZ4Q/view?usp=sharing when using with <MjmlImage>.

I am quite lost here. Would you have any suggestions how could I manage a bunch of images if not using relative paths to my App´s public folder? Or would you have any suggestions of where to store and manage images somewhere in the web, a place in the web that gives me fully described paths, ending with the file type termination (different from https://drive.google.com/file/d/1GVoSMO--v2fzyi6-R_J9bhHHnIrGeZ4Q/view?usp=sharing).

[daliusd]

I think it is quite late answer but there are number of options where to host images (both free and paid): imgur.com, amazon s3, github pages, dropbox (at least it was possible in the past) and etc. I recommend to go with paid option as you will retain control of your images and they will not be deleted accidentally. Gmail does not support embedded base64 encoded images.

I'm closing this issue now as I think everything what's possible is done here.