I have been facing an issue while trying to send emails via Gmail using Nodemailer. The problem arises when the emails are opened on Outlook or Windows 10 Mail by the company, as I need to embed images like the logo and a background. While attaching the images works fine, I do not want them to appear as downloadable images when the email is opened.
I have tried different options, such as converting the image to base64 or using the image as a link. The latter only seems to work when using the following code:
<img data-imagetype="External" src="https://imgur.com/nTjrntx.png"/>
It seems to work when I include the
data-imagetype="External"background: url() property.
Is there a way to incorporate the data-imagetype within the background: url()?
Unfortunately, the HTML code provided below does not seem to work:
<main style="position: relative;display:flex;flex-direction:column;">
<section style="z-index: 1;">
<img data-imagetype="External" src="https://imgur.com/JzrkOXb.png" />
</section>
<section style="position: absolute; z-index: 2;left:20%;right:20%;margin-top:10%">
Hello People
</section>
</main>
This seems to be related to the CSS style compatibility issues that mail clients can process.
As a result, here is the code I currently have:
<!DOCTYPE html>
<html >
<body>
<main style="padding-left:40px;padding-right:40px;border:0.5px solid #e5e5e5;margin-top:20px;border-radius:2px;background-image:url('https://imgur.com/JzrkOXb.png');background-repeat: no-repeat;background-position:center;background-size: 100% 100%;background-color:#2AEDC2;">
<p style="font-size:20px;text-align:center;color:black"><strong>Hello People</strong></p><br />
<p style="text-align:center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut quam leo. Donec ut felis in arcu fermentum pulvinar.</p><br />
<p style="text-align:center;">Regards!</p><br /><br /><br />
</main>
</body>
</html>