带有图像的 MJML 按钮

Question

我正在使用 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>

Answer 1

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

Answer 2

您可以尝试这样的操作：只需创建您的 png/jpeg 并为其添加一个 href link。

 <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>

Answer 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>

产生这个

带有图像的 MJML 按钮

MJML Button with image

email

templates

responsive

mjml