VML image is not loaded in email when using relative url

Question

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>

Mr. Blond · Accepted Answer · 2021-02-05T17:10:14.243

0

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

edited Feb 05 '21 at 17:10

answered Feb 05 '21 at 15:43

Mr. Blond

1,113
2
18
41

I would love if this “old” way would be new again. Less tracking, less broken images. What's not to love? – biziclop Mar 04 '21 at 12:23

VML image is not loaded in email when using relative url

1 Answers1