I'm facing a unique challenge with images in my HTML email signature. Sometimes the images are replaced by their file names on certain email hosts.
Interestingly, I can't replicate this error now as the images are displaying correctly again!
Here is an example of how it should look:
If anyone has insights into why these image display issues occur sporadically, your input would be greatly appreciated.
Code
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="keywords" content="">
<meta name="description" content="">
</head>
<body style="background:#eee;padding:0;margin:0;">
<div style="width:600px;background:#fff;font-family:Arial, Helvetica, sans-serif;">
<div style="padding:15px 0px;background:#0c6eb7;color:#fff;">
<div style="padding:5px 15px;">
<h2 style="margin:0;font-size:18px;text-transform:uppercase;font-weight:black; color:#ffffff;">Health Your Way</h2>
<h3 style="margin:0;margin-bottom:3px;font-size:14px;font-weight:normal;"> </h3>
</div>
</div>
<div style="padding:15px 15px;">
<p style="margin-top:0px;"></p>
<h4 style="margin:0;font-size:12px;font-weight:normal;color:#0c6eb7;">
<img src="http://i.imgur.com/vyyo3Cs.png" alt ="Email: " style="height:20px;vertical-align:middle;margin-right:5px;"> <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89e8ede4e0e7c9e1ece8e5fde1f0e6fcfbfee8f0a7eae6a7fce2">[email protected]</a>" style="color:#0c6eb7;text-decoration:none;"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3e5f5a5357507e565b5f524a5647514b4c495f47105d51104b55">[email protected]</a></a>
<b style="display:inline-block;margin:0px 10px;font-weight:normal;">|</b>
<img src="http://i.imgur.com/Uwbw49m.png" alt="Call: " style="height:20px;vertical-align:middle;margin-right:5px;"> <a href="tel:08006446414" style="color:#0c6eb7;text-decoration:none;">0800 644 6414</a>
<b style="display:inline-block;margin:0px 10px;font-weight:normal;">|</b>
<img src="http://i.imgur.com/jpcSK1r.png" alt="Website: " style="height:20px;vertical-align:middle;margin-right:5px;"> <a href="http://www.healthyourway.co.uk" style="color:#0c6eb7;text-decoration:none;">healthyourway.co.uk</a>
</h4>
<h4 style="margin:0;margin-top:10px;font-size:12px;font-weight:normal;color:#0c6eb7;">
<img src="http://i.imgur.com/bBNmf7g.png" alt="Address" style="height:20px;vertical-align:middle;margin-right:5px;"> <div style="display:inline-block;vertical-align:middle;width:calc(100% - 30px);color:#0c6eb7;">Queens Gardens Business Centre, 31 Ironmarket, Newcastle-under-Lyme<br>Staffordshire, ST5 1RP</div>
</h4>
</div>
<div style="width:100%;background:#fff;border-top:1px solid #eee;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding:15px;color:#cccccc;font-size:11px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="160"><img src="http://i.imgur.com/ZSms6VI.jpg" width="150" height="60" style="width:150px;height:60px;" alt="HealthYour Way"></td>
<td><img src="http://i.imgur.com/sXHE0gU.jpg" width="150" height="60" style="width:150px;height:60px;" alt="CredAbility"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding:15px;color:#cccccc;font-size:11px;"><p>This message may contain confidential information. If you are not the intended recipient please inform the sender that you have received the message in error before deleting it.
Please do not disclose, copy or distribute information in this e-mail or take any action in reliance on its contents: to do so is strictly prohibited and may be unlawful.</p></td>
</tr>
</tbody>
</table>
<div>
</div>
</div>
</body>
</html>