HTML <base> tag in email

2019-04-25 08:09发布

问题:

We have a content-managed solution (SDL Tridion, to be specific; however, the question is more general), which includes multiple sites with content of different languages. They all share a number of Razor-based templates, which are used to render HTML fragments with specific injected content when pages are published.

CRM is also managed through the CMS and the same templating is used for the creation of email newsletters. These HTML emails contain images, which are published out to whatever site manages the distribution list in question. Because the templating system is generic and the CMS has no concept of the absolute URLs of the final product, these images are all embedded with relative addresses. We have the capacity to apply an absolute URL as metadata to the different websites in the CMS and write .Net extensions to format these URLs into rendered image tags; however, this would add considerable overhead to this piece of work.

We can resolve this by using a <base href="..." /> tag in the <head> section of the email's markup. This seems to work in Outlook, at least; however, I have not been able to find much up-to-date information on what email clients do and do not support this tag.

The question, then: How widely supported among email clients - particularly browser-based ones - is the <base> tag?

回答1:

Unfortunately, it won't work for most web-based email clients (Hotmail, Gmail) and that typically adds up to about 30% of receivers.

Why it won't work: Most web-based clients inject whatever's inside the body tag of your email and strip out everything else, including the head. So, if you send:

<html>
<head><base ...></head>
<body><p class="youremail">Email</p></body>
</html>

The email client does this:

<html>
<head><Email client head></head>
<body>
  <email client wrapper>
  <email>
    <p class="youremail">Email</p>
  </email>
  <email client wrapper>...
</body>

So your base tag will be stripped. Even if it wasn't, since it's not include in the email client's head, it will be ignored by the browser.

Unfortunately, absolute paths on images is the way to go. I have got over similar problems in the past by using a 'preflight processor'. You could use that to get the <base> href and set it on all the images before returning the finished HTML.



回答2:

I couldn't tell if your using Razor or not, but if you are, you can do this inside a razor view:

src="@Request.Url.GetLeftPart(UriPartial.Authority)~/images/screenshot.png"