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

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-top	string	css border definition	none
border-bottom	string	css border definition	none
border-left	string	css border definition	none
border-right	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
name	string	specify the link name attribute	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%

FAQs

What is mjml-image?

Is mjml-image well maintained?

Package last updated on 10 Sep 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install