Mjml: mj-image adds an empty 'border-radius' property that invalidates all the styles on some clients

[rumbogs]

I'm using mjml v3.2.2.

This mjml code:

<mj-image
  src="https://unsplash.com/?photo=GWe0dlVD9e0"
  padding="0"
  width="300px" />

gets compiled into:

<img alt="" title="" height="auto" src="https://unsplash.com/?photo=GWe0dlVD9e0" style="border:none;border-radius:;display:block;outline:none;text-decoration:none;width:100%;height:auto;" width="300">

On some clients (example gmail.com on Android Chrome 56), the inline styles are completely removed because of that.

[iRyusa]

Hi @pbogdan03 !

Nice catch ! I'll see if I can fix it for 3.3

Thanks for this issue

[hansnolte]

Hi pbogdan03,

as a temporary solution.

<mj-head>
<mj-attributes>
<mj-image border-radius="0" />
</mj-attributes>
</mj-head>

[ngarnier]

MJML v3.3.0 is out, fixing this issue! Thanks for reporting.

To install: npm install mjml