I'm moving images from publicly hosted site to my Visual Studio project. After doing so, the VML images (<v:image />) are not loading anymore.. The image url is something like /images/my-image.png, which works as expected when using simple <img /> HTML element. The email structure is made like this, because the requirement is to show dynamic text over image.
I checked the email body using PapercutSMTP and the links are correct. I tried also to hard-code them, but no luck.
Note: I'm testing locally, but the same happens also on test environments. I'm focusing on Outlook, Gmail, IE.
My code:
<td class="emailnomob" align="center" valign="middle" background="<%=HeaderBackgroundImageUrl %>" bgcolor="#dddddd" style="background-image:url('<%=HeaderBackgroundImageUrl %>');background-size:100%;background-repeat:no-repeat; width:600px; height:300px;">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" style="width:600px; height:300px;" src="<%=HeaderBackgroundImageUrl %>" />
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="false" stroke="false" style="position: absolute; width:600px; height: 300px;">
<v:fill opacity="0%" color="#f7901e" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table width="560" cellpadding="0" cellspacing="0" border="0" align="center" style="width:560px;">
// My text over image here
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:fill>
</v:rect>
</v:image>
<![endif]-->
</td>
I fixed this issue by adding Content identifier (cid) inside :url () and src="" attributes.
<td class="emailnomob" align="center" valign="middle" background="<%=HeaderBackgroundImageUrl %>" bgcolor="#dddddd" style="background-image:url('cid:my-image.png');background-size:100%;background-repeat:no-repeat; width:600px; height:300px;">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" style="width:600px; height:300px;" src="cid:my-image.png" />
...
</td>
It is quite old approach to embedd images inside an email.
More information about the implementation details here Stackoverflow post