Why Don’t My Images Appear in My HTML E-mail?
I was browsing around the PHP forum on Daniweb and came across this problem in a post.
Here’s the situation.
The guy wanted to send out a newsletter, so he grabbed a pre-fabbed newsletter script. The PHP script seemed to work fine - it read an HTML template and then fired off the e-mail in HTML form.
There was just one problem: none of the images were appearing in the HTML e-mail when he tried to view it.
What was the culprit? The PHP script? Or simply some faulty HTML?
It turns out the PHP script was working just as intended. If you view his post, you can get a copy of the source code. I haven’t tested it, but he claims it worked fine.
The problem was a simple mistake in HTML coding.
When the img tags were declared, the src attribute was set with a relative url instead of an absolute url.
What’s the difference?
A relative url tells the browser the path to a file from the current file’s directory location. So, for example, let’s say I have a file “index.html” and a file “guide.html” inside the directory “web-design-guides” on the domain “http://www.earn-web-cash.com.”
If I want to create a link from “index.html” to “guide.html” using a relative url, I simply use this tag…
<a href="guide.html">Guide.html</a>
That tells the browser to look inside the same directory for the file “guide.html.”
A absolute url defines the absolute path to a file. In the same example, we’d have to include in the href the domain, the directory, and the file name, like so…
<a href="http://www.earn-web-cash.com/
web-design-guides/guide.html">Guide.html</a>
The advantage of relative URLs is that they’re quick to type and they make webpages easily portable. If all of my links are relative and I move the entire site to a new server, I don’t have to edit anything.
If I had used absolute urls, I would have had to change the domain name in every anchor tag. The advantage of absolute urls, though, is that they can be accessed no matter where the page is accessed.
So, for example, if I turn the webpage into an e-mail (or if it’s read in an rss reader), the absolute url is still valid. If I use a relative url in an html e-mail, the reader’s browser won’t be able to find the file - it will look in the directory that the e-mail script is running to find the file you’re linking to.
So what’s the lesson here?
If you’re writing HTML that is going to be displayed somewhere other than your server - i.e. in an e-mail, cached on someone’s hard drive, or on an rss reader - remember to always use absolute urls.
This is especially important for <img> tags - because they are almost always declared in regular pages as relative urls.
Leave a Reply