带图像的 MJML 按钮答案

【问题标题】：MJML Button with image带图像的 MJML 按钮
【发布时间】：2018-02-03 00:03:44
【问题描述】：

我正在使用 MJML 创建一个响应式电子邮件模板，并且我想在文本旁边创建一个带有图像的按钮。类似于自定义按钮，在自定义一词旁边带有齿轮图像。有什么方法可以在文本旁边的图像中编码而不使整个按钮成为图像？

<mj-column>
    <mj-button padding="5px 1px"border-radius="0px" background-color="eeeeee" color="#333333" font-family="Arial" href="http://www.ugg.com/kids" width="100%">
        <span style="letter-spacing: 2px;"><mj-image width="40px" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" witdh="40px" /> CUSTOM</mj-image></span>
        
    </mj-button>
</mj-column>

【问题讨论】：

标签： email templates responsive mjml

【解决方案1】：

如果您想在按钮内使用图像，只需使用常规 HTML <img> 标记即可。按钮/文本和“内容标签”通常接受纯 HTML，不接受 MJML。

【讨论】：

【解决方案2】：

你可以试试这样的：只需创建您的 png/jpeg 并为其添加一个 href 链接。

 <mj-column vertical-align="middle"><mj-image src="https://www.google.de/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" href="www.testdomain.de"></mj-image></mj-column>
    <mj-column vertical-align="middle">
      <mj-text color="#E60000" padding-bottom="10px" font-weight="bold" font-size="17px">Heading
      </mj-text>
      <mj-text padding-top="0px" padding-left="0px">
        <ul>
          <li><strong>Point 1 Lorem ipsum dolor</strong></li>
                        <li><strong>Point 2 filler text for testing</strong></li>
                        <li><strong>Point 3 Hello World()</strong></li>
        </ul>
      </mj-text>
    </mj-column>

【讨论】：

【解决方案3】：

我使用社交元素

<mj-social font-size="14px" icon-size="30px" mode="horizontal" align="left" padding-left="20px" padding-bottom="30px">
    <mj-social-element src="secondary_cta_dark.png" name="cta" padding="0 10px 0 0" href="#">
        Shop now
    </mj-social-element>
</mj-social>

产生这个

【讨论】：