mjml-image

What is mjml-image?

The mjml-image npm package is a component of the MJML framework, which is used to create responsive email templates. The mjml-image component specifically allows you to add and customize images within your email templates.

What are mjml-image's main functionalities?

Basic Image Insertion

This feature allows you to insert a basic image into your email template. The 'src' attribute specifies the URL of the image.

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-image src="https://via.placeholder.com/150" />
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Image with Alt Text

This feature allows you to add alt text to your image, which is useful for accessibility and for cases where the image cannot be displayed.

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-image src="https://via.placeholder.com/150" alt="Placeholder Image" />
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Image with Link

This feature allows you to make your image clickable by wrapping it in a link. The 'href' attribute specifies the URL to which the image will link.

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-image src="https://via.placeholder.com/150" href="https://example.com" />
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Image with Custom Width

This feature allows you to set a custom width for your image. The 'width' attribute specifies the width of the image in pixels.

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-image src="https://via.placeholder.com/150" width="300px" />
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Image with Padding

This feature allows you to add padding around your image. The 'padding' attribute specifies the amount of padding in pixels.

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-image src="https://via.placeholder.com/150" padding="20px" />
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Other packages similar to mjml-image

nodemailer

Nodemailer is a module for Node.js applications to allow easy email sending. While it does not specifically focus on image handling within email templates, it provides a comprehensive solution for sending emails, including attachments and inline images.

email-templates

The email-templates package is a tool for creating, sending, and managing email templates. It supports various templating engines and allows for the inclusion of images, but it is more general-purpose compared to mjml-image, which is specifically designed for responsive email design.

handlebars

Handlebars is a popular templating engine that can be used to create dynamic email templates. While it does not provide built-in support for responsive design like MJML, it allows for the inclusion of images and other dynamic content within email templates.

README

mj-image

Displays a responsive image in your email. It is similar to the HTML <img /> tag. Note that if no width is provided, the image will use the parent column width.

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-image width="300px" src="https://www.online-image-editor.com//styles/2014/images/example_image.png" />
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

attribute	unit	description	default value
align	position	image alignment	center
alt	string	image description	n/a
border	string	css border definition	none
border-radius	px	border radius	n/a
container-background-color	color	inner element background color	n/a
css-class	string	class name, added to the root HTML element created	n/a
fluid-on-mobile	string	if "true", will be full width on mobile even if width is set	n/a
height	px	image height	auto
href	url	link to redirect to on click	n/a
padding	px	supports up to 4 parameters	10px 25px
padding-bottom	px	bottom offset	n/a
padding-left	px	left offset	n/a
padding-right	px	right offset	n/a
padding-top	px	top offset	n/a
rel	string	specify the rel attribute	n/a
sizes	media query & width	set width based on query	n/a
src	url	image source	n/a
srcset	url & width	enables to set a different image source based on the viewport	n/a
target	string	link target on click	_blank
title	string	tooltip & accessibility	n/a
usemap	string	reference to image map, be careful, it isn't supported everywhere	n/a
width	px	image width	100%