mjml-image

4.15.3 • Public • Published

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 ''
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 parent width

Readme

Keywords

none

Package Sidebar

Install

npm i mjml-image

Homepage

mjml.io

Weekly Downloads

627,318

Version

4.15.3

License

MIT

Unpacked Size

11.2 kB

Total Files

4

Last publish

Collaborators

  • mjmlio
  • iryusa
  • loeck
  • ngarnier
  • meriadec
  • kmcb