mjml-image

mjml-image

Usage no npm install needed!

<script type="module">
  import mjmlImage from 'https://cdn.skypack.dev/mjml-image';
</script>

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>

try it live

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%